Your search did not match any results.

DevExtreme HTML5 JavaScript Charting library is a collection of 30+ responsive charts that enable you to transform data into an eye-catching and elegant visual representation. Line, area, bar, pie, funnel, pyramid, financial, range, and polar charts - this is just the tip of the iceberg. Every chart from this library is available as a jQuery plugin, supports binding to any data source, and provides its own distinctive feature set. Explore other demos in this section to find the chart for your next project.

Copy to CodePen
Apply
Reset
$(function () { var data = complaintsData.sort(function (a, b) { return b.count - a.count; }), totalCount = data.reduce(function (prevValue, item) { return prevValue + item.count; }, 0), cumulativeCount = 0, dataSource = data.map(function (item, index) { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercentage: Math.round(cumulativeCount * 100 / totalCount) }; }); $("#chart").dxChart({ palette: "Harmony Light", dataSource: dataSource, title: "Pizza Shop Complaints", argumentAxis: { label: { overlappingBehavior: "stagger" } }, tooltip: { enabled: true, shared: true, customizeTooltip: function (info) { return { html: "<div><div class='tooltip-header'>" + info.argumentText + "</div>" + "<div class='tooltip-body'><div class='series-name'>" + info.points[0].seriesName + ": </div><div class='value-text'>" + info.points[0].valueText + "</div><div class='series-name'>" + info.points[1].seriesName + ": </div><div class='value-text'>" + info.points[1].valueText + "% </div></div></div>" }; } }, valueAxis: [{ name: "frequency", position: "left", tickInterval: 300 }, { name: "percentage", position: "right", showZero: true, label: { customizeText: function (info) { return info.valueText + "%"; } }, constantLines: [{ value: 80, color: "#fc3535", dashStyle: "dash", width: 2, label: { visible: false } }], tickInterval: 20, valueMarginsEnabled: false }], commonSeriesSettings: { argumentField: "complaint" }, series: [{ type: "bar", valueField: "count", axis: "frequency", name: "Complaints frequency", color: "#fac29a" }, { type: "spline", valueField: "cumulativePercentage", axis: "percentage", name: "Cumulative percentage", color: "#6b71c3" }], legend: { verticalAlignment: "top", horizontalAlignment: "center" } }); });
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/18.1.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="chart"></div> </div> </div> </body> </html>
#chart { height: 440px; } .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } .tooltip-body { width: 170px; } .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }
var complaintsData = [ { complaint: "Pizza is cold", count: 780 }, { complaint: "Inadequate cheese quantity", count: 120 }, { complaint: "Not baked properly", count: 52 }, { complaint: "Delayed delivery", count: 1123 }, { complaint: "Damaged delivery", count: 321 }, { complaint: "Incorrect billing", count: 89 }, { complaint: "Wrong size delivered", count: 222 } ];