Adding Tooltips To Multiple Charts

[yzhak]

Hi! I have two bar charts on one page. Each chart has plugins: [ChartistTooltip()] in its respective options. But all tooltips are appended only to the first chart. I.e., the values from the second chart appear in the tooltips inside the first chart component.

How would I correct this so that the tooltips containing values from the second chart are appended to the second chart?

Thank you very much for your help!

[lukbukkit]

Thanks for reporting your problem. 👍 I'll look tomorrow or at the weekend into this issue.

[yzhak]

I'd really appreciate that! I've created an example in codesandbox for your convenience: https://codesandbox.io/s/m5m8z0wm79?fontsize=14

[lukbukkit]

Sorry I was really busy this weekend, I'll try my best to fix this issue as soon as possible

[lukbukkit]

The problem is maybe caused by the css rule:

.ct-chart {
    position: relative;
}

If the chart is relative, it can't correctly calculate the position of the popup. I'll fix this problem.

But as a quick fix, you've got two options:

1. ~You can disabled the relative position~
2. You can use the appendToBody option of this plugin:

   let chartOne = new Chartist.Bar('.ct-chart-one', chartA, {
   plugins: [
       ChartistTooltip({
           appendToBody: true,
       }),
   ],
   });

[yzhak]

Adding the appendToBody option to both charts fixed this issue. Thank you so very much for your suggestions and time!

[lukbukkit]

I found the cause of the problem and fixed it. Now you just have to get the new version 0.0.21 and don't have to change anything other. You can still use the appendToBody option, if you want, but you can also disable it again.

[yzhak]

Great! Thank you very much again!