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