0

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

David Liang
  • 20,385
  • 6
  • 44
  • 70
Arshi
  • 1
  • 4
  • can you post the code that you have tried – Learner Dec 25 '18 at 14:41
  • @DILEEPTHOMAS I am a designer not a developer, the development team is saying it is not possible. The question is with respect to this: https://www.amcharts.com/demos/100-stacked-column-chart/?theme=spiritedaway In the tooltip, I want to show all data of a particular column. – Arshi Dec 25 '18 at 15:09
  • you need to show the total on the top of each stacked bar or up to where ever you hover you need to get the total – Learner Dec 25 '18 at 15:15
  • so on the first section where ever you hover you need to get as "series 1: 11.11% series 2: 55.56% series 3: 33.33%". Is it – Learner Dec 25 '18 at 15:28
  • @DILEEPTHOMAS yes yes..you got it! As in wherever I click on the first column, irrespective of the section, it should display all 3. – Arshi Dec 25 '18 at 15:30

1 Answers1

1

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/

David Liang
  • 20,385
  • 6
  • 44
  • 70
  • Thanks David. I wish they enroll this feature in future. It is very helpful for getting a comparative view in a single column. – Arshi Dec 27 '18 at 07:05
  • @Arshi: see https://stackoverflow.com/a/53790136/2410655 for workarounds. I personally like displaying data along with legends instead of tooltips as there is only so little you can do with tooltips. – David Liang Dec 27 '18 at 07:51