Issue with combined chart types, multiple axis and shared tooltip.

[markpx]

I have average temperature and rain data for each day of the year, with that data I am trying to create a graph to show everything in the same graphs. Im almost done but I am having an issue with the tooltips.

Here’s my demo: https://codepen.io/markpx/pen/BeyMdx

My chart has 4 splines, one for maximum, one for minimum and one for median temperatures, and one for rain for each day of the year (this one uses a secondary Y axis). That works fine, but I want to add a bar chart behind the splines, to show the accumulated rain for each month (I don’t have that data yet so I hardcoded some random numbers just for testing).

I added a second X axis for the bar chart because that’s the only way I found for the bars to fill the entire month, and now if I use toolTip: { shared: true }, I can only see the tooltip for the bar chart, if I remove that code I can mouseover each line and bar individually and the tooltip works fine that way, but I want it shared.

Any workaround?

[Vishwas R]

@markpx,

Thanks for reporting the use-case, we will improve this behavior in future releases. You can work-around this issue by assigning all series to primary x-axis and using contentFormatter as shown in this updated pen.

—
Vishwas R
Team CanvasJS

[markpx]

Thank you, the workaround seems to work, only drawback is that the bar only gets highlighted when the mouse is over the day 15 of each month and not for the rest of the bar that dataPointWidth expanded. I added highlightEnabled: false so it wont highlight at all. I guess using mouseover and mouseout it could be done so it highlight the bar when any day of that month is highlighted on the other lines, but not too worried about that right now, may look into it later. Thanks again.