Your search did not match any results.
Charts

Axis Label Templates

Axis labels display values for major axis ticks.

To configure labels for individual axes, specify label settings in the valueAxis.label and argumentAxis.label objects. To configure labels for all axes, use the commonAxisSettings.label object. Individual settings take precedence over common settings.

This demo illustrates how you can display custom content for axis labels. To replicate this demo, declare SVG markup within the template option. You can access a label's original and formatted values from template code.

Copy to CodePen
Apply
Reset
$(function () { $("#chart").dxChart({ dataSource: dataSource, title: "Ice Hockey World Championship Gold Medal Winners", commonSeriesSettings: { type:"bar", label: { visible: true }, argumentField: "country" }, series: [{ name: "Gold", valueField: "gold", color: "#ffd700" },{ name: "Silver", valueField: "silver", color: "#c0c0c0" },{ name: "Bronze", valueField: "bronze", color: "#cd7f32" }], argumentAxis: { label: { template: function(data, g) { var content = $('<svg overflow="visible">' + '<image filter="url(#DevExpress_shadow_filter)" y="0" width="60" height="40" href="' + getFilePath(data.valueText) +'"></image>' + '<text class="template-text" x="30" y="59" text-anchor="middle">' + data.valueText + '</text></svg>'); g.appendChild(content.get(0)); } } } }); function getFilePath(text) { return "../../../../images/flags/3x2/" + text.toLowerCase().replace(" ", "") + ".svg"; } });
<!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.5.1/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/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.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> <svg width="0" height="0"> <defs> <filter id="DevExpress_shadow_filter" x="-50%" y="-50%" width="200%" height="200%" transform="translate(0,0)"> <fegaussianblur in="SourceGraphic" result="gaussianBlurResult" stdDeviation="3"></fegaussianblur> <feoffset in="gaussianBlurResult" result="offsetResult" dx="0" dy="1"></feoffset> <feflood result="floodResult" flood-color="#000000" flood-opacity="0.3"></feflood> <fecomposite in="floodResult" in2="offsetResult" operator="in" result="compositeResult"></fecomposite> <fecomposite in="SourceGraphic" in2="compositeResult" operator="over"></fecomposite> </filter> </defs> </svg> </div> </body> </html>
#chart { height: 440px; } .template-text { fill: #767676; font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif; font-weight: 400; font-size: 13px; }
var dataSource = [{ country: "Russia", gold: 27, silver: 10, bronze: 10 }, { country: "Canada", gold: 26, silver: 15, bronze: 9 }, { country: "Czech Republic", gold: 12, silver: 13, bronze: 21 }, { country: "Sweden", gold: 11, silver: 19, bronze: 17 }, { country: "Finland", gold: 3, silver: 8, bronze: 3 }];