I am using the devextreme chart(js charts) with modularity concept.
In one of my bar charts i wish to display a tooltip which on hover displays the name of the SeriesBar with also the value it has. i.e. Let us assume my chart has 3 bars which depict the population of USA,UK,France. While i hover over the USA(Bar) i would like my tooltip to show
USA:10000
Similarly for UK and France
$("#myChartDiv").dxChart({
dataSource: dataset,
commonSeriesSettings: {
argumentField: 'DimensionValue',
valueField: 'MetricValue',
label: {
visible: true,
format: {
type: "fixedPoint",
precision: Barnumberprecision
}
},
type: 'bar',
},
seriesTemplate: {
nameField: "SurveyYear",
},
valueAxis: {
title: {
text: Title
},
position: "left"
},
argumentAxis: {
label: {
overlappingBehavior: { mode: Barlabeloverlappingmode, rotationAngle: Barlabelrotateangle }
}
},
tooltip: {
enabled: true,
location: "edge",
customizeText: function () {
return this.seriesName;
},
format: {
//type: "fixedPoint",
precision: Barnumberprecision
}
},
legend: {
verticalAlignment: BarlegendverticalAlignment,
horizontalAlignment: BarlegendhorizontalAlignment
}
});
I have gone through the devextreme website but found no property which worled for me or may be i did not use it correctly.
can some one tell me which property satisfies my requirement?
I suggest you to go through tooltip documentation, there you will find the properties name which can be used to display particular value.
Refer this DX thread: dxChart - How to customize a tooltip
tooltip: {
enabled: true,
customizeTooltip: function (point) {
return {
text: point.value+' of '+point.argument+' against '+point.seriesName
}
}
}