Overview
DevExtreme HTML5 JavaScript Charts is a library of adaptive chart components available as AngularJS directives. In addition to the common line, bar, and pie charts, the library includes such specialized charts as treemap, bubble chart, polar and radar charts, and many more. All charts support two-way binding to scope properties and behave like native components. View demos in this section for more information on chart features, like tooltips, client-side exporting and printing, scale breaks, error bars, etc.
jQuery
AngularJS
Angular
Vue
React
ASP.NET MVC
ASP.NET Core
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
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)
};
});
$scope.chartOptions = {
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.4/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.4/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/18.1.4/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" ng-app="DemoApp" ng-controller="DemoController">
<div id="chart-demo">
<div id="chart" dx-chart="chartOptions"></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 }
];