@(Html.DevExtreme().PieChart()
.ID("pie-chart")
.Palette(VizPalette.Bright)
.Title("Top 10 Most Populated States in US")
.Series(s => s
.Add()
.ArgumentField("Name")
.ValueField("Population")
)
.Export(e => e.Enabled(true))
.Tooltip(t => t
.Enabled(true)
.ContentTemplate(@<text>
<div class='state-tooltip'>
<img src="<%- getImagePath(point) %>" /><h4 class='state'><%- argument %></h4>
<div class='capital'>
<span class='caption'>Capital</span>: <%- point.data.Capital %>
</div>
<div class='population'>
<span class='caption'>Population</span>: <%- formatNumber(value) %> people
</div>
<div>
<span class='caption'>Area</span>: <span class='area-km'><%- formatNumber(point.data.Area) %></span> km<sup>2</sup> (<span class='area-mi'><%- formatNumber(0.3861 * point.data.Area) %></span> mi<sup>2</sup>)
</div>
</div>
</text>)
)
.DataSource(new[] {
new { Name = "California", Population = 38802500, Capital = "Sacramento", Area = 423967 },
new { Name = "Texas", Population = 26956958, Capital = "Austin", Area = 695662 },
new { Name = "Florida", Population = 19893297, Capital = "Tallahassee", Area = 170312 },
new { Name = "New York", Population = 19746227, Capital = "Albany", Area = 141297 },
new { Name = "Illinois", Population = 12880580, Capital = "Springfield", Area = 149995 },
new { Name = "Pennsylvania", Population = 12787209, Capital = "Harrisburg", Area = 119280 },
new { Name = "Ohio", Population = 11594163, Capital = "Columbus", Area = 116098 },
new { Name = "Georgia", Population = 10097343, Capital = "Atlanta", Area = 153910 },
new { Name = "North Carolina", Population = 9943964, Capital = "Raleigh", Area = 139391 },
new { Name = "Michigan", Population = 9909877, Capital = "Lansing", Area = 250487 }
})
)
<script>
var formatNumber = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format;
function getImagePath(point) {
return '../../images/flags/' + point.data.Name.replace(/\s/, "") + ".svg";
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult TooltipHTMLSupport() {
return View();
}
}
}
#pie-chart {
height: 440px;
}
.state-tooltip {
height: 90px;
}
.state-tooltip > img {
width: 60px;
height: 40px;
display: block;
margin: 0 5px 0 0;
float: left;
border: 1px solid rgba(191, 191, 191, 0.25);
}
.state-tooltip > h4 {
line-height: 40px;
font-size: 14px;
margin-bottom: 5px;
}
.state-tooltip .caption {
font-weight: 500;
}
.state-tooltip sup {
font-size: 0.8em;
vertical-align: super;
line-height: 0;
}