Your search did not match any results.
Charts

Tooltip HTML Support

Documentation
In this demo, tooltips are displayed using an HTML template defined in the tooltip | customizeTooltip function.
Copy to Codepen
Apply
Reset
window.onload = function() { var viewModel = { pieChartOptions: { palette: "bright", dataSource: states, title: "Top 10 Most Populated States in US", series: { argumentField: "name", valueField: "population", tagField: "data" }, "export": { enabled: true }, tooltip: { enabled: true, customizeTooltip: function (args) { return { html: "<div class='state-tooltip'><img src='../../../../images/flags/" + args.point.tag.flag + ".gif' /><h4>" + args.argument + "</h4><div><b>Capital</b>: " + args.point.tag.capital + "</div><div><b>Population</b>: " + Globalize.formatNumber(args.value, { maximumFractionDigits: 0 }) + " people</div>" + "<div><b>Area</b>: " + Globalize.formatNumber(args.point.tag.area, { maximumFractionDigits: 0 }) + " km<sup>2</sup> (" + Globalize.formatNumber(0.3861 * args.point.tag.area, { maximumFractionDigits: 0 }) + " mi<sup>2</sup>)" + "</div>" + "</div>" }; } } } }; ko.applyBindings(viewModel, document.getElementById("chart-demo")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="pie-chart" data-bind="dxPieChart: pieChartOptions"> </div> </div> </div> </body> </html>
#pie-chart { height: 440px; } .state-tooltip { height: 90px; } .state-tooltip > img { width: 60px; height: 40px; display: block; margin: 0 5px 0 0; float: left; } .state-tooltip > h4 { line-height: 40px; font-size: 14px; margin-bottom: 5px; } .state-tooltip sup { font-size: 0.8em; vertical-align: super; line-height: 0; }
var states = [{ name: "California", population: 38802500, data: { capital: "Sacramento", area: 423967, flag: "california" } }, { name: "Texas", area: 695662, population: 26956958, data: { capital: "Austin", area: 423967, flag: "texas" } }, { name: "Florida", area: 170312, population: 19893297, data: { capital: "Tallahassee", area: 423967, flag: "florida" } }, { name: "New York", area: 141297, population: 19746227, data: { capital: "Albany", area: 423967, flag: "newyork" } }, { name: "Illinois", area: 149995, population: 12880580, data: { capital: "Springfield", area: 423967, flag: "illinois" } }, { name: "Pennsylvania", area: 119280, population: 12787209, data: { capital: "Harrisburg", area: 423967, flag: "pennsylvania" } }, { name: "Ohio", area: 116098, population: 11594163, data: { capital: "Columbus", area: 423967, flag: "ohio" } }, { name: "Georgia", area: 153910, population: 10097343, data: { capital: "Atlanta", area: 423967, flag: "georgia" } }, { name: "North Carolina", area: 139391, population: 9943964, data: { capital: "Raleigh", area: 423967, flag: "northcarolina" } }, { name: "Michigan", area: 250487, population: 9909877, data: { capital: "Lansing", area: 423967, flag: "michigan" } }];