Show all series in a tooltip in a grouped column chart with multiple series.

[C3maLi]

Hi's,

I want to show the data series as an example below! Is it possible to do this? Thank you.

(https://www.fusioncharts.com/charts/column-bar-charts/grouped-column-chart-with-multiple-series?framework=javascript)

[junedchhipa]

Yes, take a look at this example https://apexcharts.com/javascript-chart-demos/column-charts/basic/

[C3maLi]

Thanks for your return,

The sample you provided does not exactly meet what I want. I want to show it as a group. I have 2 data series and I want to show them in a single tooltip. I want to see the information of two data series in the tooltip when I do column hover instead of hovering to each bar.

I'm make the image below by making the chart type line, making the series types column and using the custom template. But this is not a very health situation.

For example;

[junedchhipa]

Try

tooltip: {
  shared: true
}

[C3maLi]

Try

tooltip: {
  shared: true
}

Thank you, is working (:

[C3maLi]

I'm disturbing again

When I activate the shared tooltipe feature, the tooltip header appears in the column without data. It is not shown only because it has no content.

I want to hide the tooltip when two data series are empty. Is it possible to do this dynamically?

Sample; y: { formatter: function (val, data) { data.w.config.tooltip.enabled = false; } } (not working!)

[junedchhipa]

Seems like a bug. I will take a look soon.

[C3maLi]

I encounter a situation like this is it normal?

I have a 2 legend, no problem appears when both of them are active. When I passive my first legend, all the series in the data set that is in the 2nd legend are displayed as "null" and only the tooltip appears on the chart.

I am encountering this situation when shared: true.

You can see more detailed from the image below.

[junedchhipa]

Can you please post a codepen demo to reproduce it easily on my side?

[C3maLi]

Here you can check it, when you make Legend 1 passive, you can see the problem I mean.

https://codepen.io/CemaLi/pen/jOEJOLr

[AshwinidBawankar]

tooltip: { shared: true } is not working in custom tooltip

[mnkcoder]

for anyone who land here with the same issue, I was able to fix this with below settings for tooltip. Apparently I had to explicitly set intersect to false along with shared set to true

tooltip: { shared: true, intersect: false }