Your search did not match any results.
Charts

Selection

API Reference
This demo illustrates use of the PointClick callback function. The ‘allArgumentPoints’ mode is used to hover and make the selection. All points that have a value for the selected (hovered) argument change display styles.
Copy to Codepen
Apply
Reset
$(function(){ $("#chart").dxChart({ rotated: true, dataSource: dataSource, commonSeriesSettings: { argumentField: "country", type: "bar", hoverMode: "allArgumentPoints", selectionMode: "allArgumentPoints", label: { visible: true, format: { type: "percent", precision: 1 } } }, valueAxis: { label: { format: { type: "percent", precision: 1 } } }, series: [ { valueField: "year2007", name: "2007 - 2008" }, { valueField: "year2008", name: "2008 - 2009" } ], title: { text: "Economy - Export Change" }, legend: { verticalAlignment: "bottom", horizontalAlignment: "center" }, "export": { enabled: true }, onPointClick: function(e) { e.target.select(); }, onLegendClick: function(e) { var series = e.target; if(series.isVisible()) { series.hide(); } else { series.show(); } } }); });
<!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 = [{ country: "China", year2007: 0.1732, year2008: -0.1588 }, { country: "Germany", year2007: 0.0964, year2008: -0.2231 }, { country: "United States", year2007: 0.1187, year2008: -0.1878 }, { country: "Japan", year2007: 0.1081, year2008: -0.2614 }, { country: "France", year2007: 0.1014, year2008: -0.2222 }, { country: "Netherlands", year2007: 0.1355, year2008: -0.2015 }];