Makanz/chartjs-plugin-trendline

Trendline z-index is too high

Opened this issue · 6 comments

Axword commented

obraz

I have a problem with z-index of trendline. It covers my tooltip and there is no way of chaning z- index of it (same as for trendline). Is there anything i can do about it?

zigomir commented

@Axword

To fix it I had to register ChartTrendline before the Tooltip plugin, ie

Chart.register(
  // ...otherPlugins
  ChartTrendline,
  Tooltip,
  // ...otherPlugins
)

order matters here.

caveat: we're using Chartjs v3 & forked chartjs-plugin-trendline to make it work with Chartjs v3

Hibrix-net commented

@Axword

To fix it I had to register ChartTrendline before the Tooltip plugin, ie

Chart.register(
  // ...otherPlugins
  ChartTrendline,
  Tooltip,
  // ...otherPlugins
)

order matters here.

caveat: we're using Chartjs v3 & forked chartjs-plugin-trendline to make it work with Chartjs v3

Hello,

Could you elaborate a little more the answer please? Do we first have to de-register the integrated ChartJS tooltip plugin and then re-register it after the ChartTrendline?

Thanks,

zigomir commented

I know nothing about your codebase, but in ours, changing this order helped, i.e. moving ChartTrendline before Tooltip.

Chart.register(
  // ...otherPlugins
- Tooltip,
- ChartTrendline,
+ ChartTrendline,
+ Tooltip,
  // ...otherPlugins
)

Maybe it doesn't work like this in Chartjs v2, I've never used it 🤷‍♂️

Hibrix-net commented

Hi,

Thanks for your answer. So I understand you are using a custom tooltip plugin, because as far as I know there's an embedded tooltip plugin within the ChartJS core that can only be enabled/disbled but not registered/unregistered.

Am I missing something here?

I am using the VueJS ChartJS wrapper from here (that btw is using ChartJS version 2.8): https://github.com/apertureless/vue-chartjs

Not sure how to proceed, I already tried some hacks with no luck at all. Any advice will be very welcome.

Best,

its0xFUL commented

On the topic of z-index, would it be possible to add an option to draw trend line with a lower z index than the graph itself (ie. visually behind)? Can provide a PR if anyone else needs this.

Great plugin btw!

Bobakanoosh commented

Heads up for anyone else with this issue, I just copied the plugin source to my project (one file) and adjusted it to render on beforeDatasetDraw instead of afterDatasetDraw