Tuesday, 22 September 2015

Chart.js tooltip cut off

Problem: 
  • Using Chart.js to display data but the tooltip has been cut off by the edge of the chart's container:

Apparently it is a bug (https://github.com/nnnick/Chart.js/issues/622).

A couple of options I thought of, including:
  • Line break: "At this point in time, it's not possible to add line breaks to a tooltip or axis label." - http://stackoverflow.com/questions/29302392/chartjs-tooltip-line-breaks
  • Text wrapping: Apparently the top solution is to hope a solution "magically" happens - https://github.com/nnnick/Chart.js/issues/608
  • Adding width, margin, neither worked.
  • Updating Chart.js to calculate and move the tooltips to prevent being cut off, however this is something I can't implement for what I'm working on - https://github.com/matt-bradley/Chart.js/commit/9fd40ce65fbcb7fb11f6af1d019001a4718c666e


Solution:
  • Increase the size of the canvas using width and height (and also therefore adding margins for the center text). This was not the preferred option, but it works and was quick to implement. Because the size of the tooltip will never be larger than the example given, it's also therefore a robust solution:

2 comments:

  1. Although this isn't a direct solution, it is a wonderful time & effort saving workaround.

    Thank you

    ReplyDelete