Search code examples
javascriptcsschartschart.js2

Chart.js: Change width of tooltip

I want to change the width of the tooltip in Chart.js. The reason is that the tooltips hide under iFrame if they are too wide.

(I tried to move them but I only found the option position: 'nearest'. But that doesn't solve the problem.)

Is there no option to set the width of the tooltip to 200px (with line breaks)?

I only found options for border width or font size (which should be bigger).

Solution

  • You could also try position: 'average' or define your own as specified @

    https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes

    i.e. in the example there is an example of a custom positioner and it states "New modes can be defined by adding functions to the Chart.Tooltip.positioners map"

    If the above does not suit then you would have to write your own external html tooltips as specified @ https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips