Your search did not match any results.
Charts

Customize Points and Labels

API Reference
This demo illustrates DevExtreme HTML5 Chart Widget’s ability to customize individual points and labels.
Copy to Codepen
Apply
Reset
$(function(){ var highAverage = 77, lowAverage = 58; $("#chart").dxChart({ dataSource: dataSource, commonSeriesSettings: { argumentField: "day", valueField: "temperature", type: "bar", color: "#e7d19a" }, customizePoint: function() { if(this.value > highAverage) { return { color: "#ff7c7c", hoverStyle: { color: "#ff7c7c" } }; } else if(this.value < lowAverage) { return { color: "#8c8cff", hoverStyle: { color: "#8c8cff" } }; } }, customizeLabel: function() { if (this.value > highAverage) { return { visible: true, backgroundColor: "#ff7c7c", customizeText: function () { return this.valueText + "&#176F"; } }; } }, "export": { enabled: true }, valueAxis: { min: 40, maxValueMargin: 0.1, label: { customizeText: function() { return this.valueText + "&#176F"; } }, constantLines: [{ label: { text: "Low Average" }, width: 2, value: lowAverage, color: "#8c8cff", dashStyle: "dash" }, { label: { text: "High Average" }, width: 2, value: highAverage, color: "#ff7c7c", dashStyle: "dash" }] }, series: [{}], title: { text: "Daily Temperature in May" }, legend: { visible: false } }); });
<!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> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.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"> <div id="chart"></div> </div> </body> </html>
#chart { height: 440px; width: 100%; }
var dataSource = [{ day: '1', temperature: 57 }, { day: '2', temperature: 58 }, { day: '3', temperature: 57 }, { day: '4', temperature: 59 }, { day: '5', temperature: 63 }, { day: '6', temperature: 63 }, { day: '7', temperature: 63 }, { day: '8', temperature: 64 }, { day: '9', temperature: 64 }, { day: '10', temperature: 64 }, { day: '11', temperature: 69 }, { day: '12', temperature: 72 }, { day: '13', temperature: 75 }, { day: '14', temperature: 78 }, { day: '15', temperature: 76 }, { day: '16', temperature: 70 }, { day: '17', temperature: 65 }, { day: '18', temperature: 65 }, { day: '19', temperature: 68 }, { day: '20', temperature: 70 }, { day: '21', temperature: 73 }, { day: '22', temperature: 73 }, { day: '23', temperature: 75 }, { day: '24', temperature: 78 }, { day: '25', temperature: 76 }, { day: '26', temperature: 76 }, { day: '27', temperature: 80 }, { day: '28', temperature: 76 }, { day: '29', temperature: 75 }, { day: '30', temperature: 75 }, { day: '31', temperature: 74 }];