CODEWITHSUNDEEP
javascriptamcharts
Arshi
Arshi

Reputation: 1

In amcharts' stacked column chart, how do I display all the values of a particular column in tooltip?

In amcharts stacked column chart, Through the default method, when I hover over a particular section in a column, I see tooltip for that section only.

If I want to display all the values of a column wherever I hover on that column, how is that possible? Edit:

i.e in this example, amcharts.com/demos/100-stacked-column-chart/?theme=spiritedaway

There are 3 sections for column "One", when I hover on the topmost section it says "series 3: 33.33%". I want it to display "series 1: 11.11% series 2: 55.56% series 3: 33.33%" all together in the tooltip. Is that possible?

P.S: I am not a developer but a UI designer, my team is saying it is not possible, but by looking at the code, I feel like it is possible

Upvotes: 0

Views: 2414

Answers (1)

David Liang
David Liang

Reputation: 21536

Correct me if I am wrong, but currently there is no simple way to display all series' information in a single tooltip on an x axis level.

I have tried to override the getTooltipText adapter in xAxis, and I was able to access the raw data:

...,
xAxes: [{
    type: "CategoryAxis",
    adapter: {
        getTooltipText: function(text, target, key) {
            let dataItem = target.dataItemsByCategory.getKey(text),
                data = dataItem.dataContext;

            // Here you can access the raw data
            // i.e., data.value1, data.value2, etc

            return text;
        }
    }
}],
...

But then I had to recalculate their percentages every single time, and I couldn't put HTML on the return text (there is no getTooltipHTML adapter).

Display values along with Legend

I ended up displaying the series' values along with their legends instead. And there is a documented way to do so: https://www.amcharts.com/docs/v4/concepts/legend/#Interacting_with_cursor

You just need to define the legend settings on each series, and turn on the legend as well as the cursor:

...,
series: [{
    type: "ColumnSeries",
    ...,
    legendSettings: {
        valueText: "---%",
        legendSettings: "[bold]{valueY.totalPercent.formatNumber('#.00')}%"
    },
    ...
}],
...,
legend: {},
cursor: {
    lineX: {
        disabled: true
    },
    lineY: {
        disabled: true
    }
},
...

enter image description here

demo: http://jsfiddle.net/davidliang2008/582snbwo/57/

Upvotes: 1

Related Questions