[Chartjs]-Chart.js 2 – how to show all tooltips always and stylize it

by

1👍

Since you are already drawing the numbers on each point, its just a matter of drawing the text underline and line from point to the text. Basically, you use the same approach of calculating the x and y coordinates and draw away.

Here is an updated function that draws what you are requesting (and applies the correct color for each line as well…which you had left out). Note, it depends on a text underline function that is discussed here.

Chart.plugins.register({
  afterDatasetsDraw: function(chartInstance, easing) {
    // To only draw at the end of animation, check for easing === 1
    var ctx = chartInstance.chart.ctx;

    // for each line
    chartInstance.data.datasets.forEach(function(dataset, i) {
      var meta = chartInstance.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          ctx.fillStyle = element._model.borderColor;

          var fontSize = 19;
          var fontStyle = 'normal';
          var fontFamily = 'Helvetica Neue';
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

          // Just naively convert to string for now
          var dataString = "";
          if ((index != 0) && (index != 4)) {
            dataString = number_format(dataset.data[index].toString(), 0, ',', ' ');
          }

          var padding = 20;
          var position = element.tooltipPosition();
          var thickness = 1;
          position.x -= 10;
          ctx.textAlign = 'right';
          ctx.textBaseline = 'middle';

          // draw text
          ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);

          // underline text
          var underlinePoint = underline(ctx, dataString, position.x, position.y - (fontSize / 2) - padding, fontSize, element._model.borderColor, thickness, -5);

          // draw line connecting text underline with point
          ctx.beginPath();
          ctx.strokeStyle = element._model.borderColor;
          ctx.lineWidth = thickness;
          ctx.moveTo(element._model.x, element._model.y);
          ctx.lineTo(underlinePoint.x, underlinePoint.y);
          ctx.stroke();
        });
      }
    });
  }
});

Here is a jsfiddle that demonstrates the above approach (forked from your question).

Leave a comment