Skip to content

Trim long tooltip title in doughnut chart #3095

@RomanticCat

Description

@RomanticCat

Hi all,

I had some problem with long tooltips in doughnut chart.
Which could be googled by following url

http://stackoverflow.com/questions/28476159/chart-js-pie-tooltip-getting-cut

Eventually, I solved this issue with following option code using callbacks.
Can we make this configuration as parameters? Currently chart.js support responsive
and seem to detect width of context.

It seems to be long issue, and will be great if chart.js can support this feature.

Cheers,


var chartOptions = {
  title: {
    text: titleText
  },
  legend: {
    display: true,
    labels: {
      fontSize: 10
    },
    position: 'bottom'
  },
  tooltips: {
    mode: 'single',
    callbacks: {
      label: function(tooltipItems, data) {

        var linebreakAt = 20;
        var value = data.datasets[0].data[tooltipItems.index];

        var label = data.labels[tooltipItems.index];
        label = value + ' - ' + label;

        var returnText = [];

        for (var lineIdx = 0; (lineIdx * linebreakAt) < label.length; lineIdx++) {
          var currentLoc = lineIdx * linebreakAt;
          var lineText;

          if ((currentLoc + linebreakAt) < label.length) {
            lineText = label.substring(currentLoc, currentLoc + linebreakAt);
          } else {
            lineText = label.substring(currentLoc, label.length);
          }
          if (lineIdx == 0) {
            returnText = [lineText];
          } else {
            returnText.push(lineText);
          }
        }
        return returnText;
      }
    }
  }
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions