0

I have a chartjs doughnut chart which is displaying fine, but when printed as a pdf, the tooltips don't show.

I've tried targeting .tooltip class within an @media print{} block, but this didn't work. I tried some implementation with custom property in the tooltip options but nothing I've tried worked at all.

Does anyone have a solution, where the tooltips will either always persist, or can be persisted when printing the HTML page to a pdf?

Thanks,

Andrew
  • 375
  • 2
  • 12
  • 1
    Maybe use javascript's onBeforePrint action to re-render the charts differently for the PDF and/or an inline script in the pdf template & enough of a script-execution limit to allow it to render. You could also rebuild the charts in html for the pdf version of the report. Also, you might find this helpful: https://stackoverflow.com/questions/36992922/chart-js-v2-how-to-make-tooltips-always-appear-on-pie-chart – admcfajn May 19 '21 at 20:30

1 Answers1

1

I think you might be better off using the data labels plugin, will give your chart a cleaner look instead of having a tooltip active for each element: https://chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • Thanks @LeeLenalee - this is interesting plugin, though the labels themselves don't seem to respond to customizing the values inside. It does work for printing though – Andrew May 19 '21 at 22:37