Search code examples
javascriptjquerydevexpressdevextreme

Display both the series label and the value in a devextremecharts(dxChart)


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?


Solution

  • 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
                    }
            }
        }