Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    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 }];