Chart.js – Line Chart Tooltip Labels

0
votes

When I hover over a dataset using a Line Chart, the tooltip shows a color key next to each item in the dataset. However, there is no spacing between the key and the text.

At the least, I'd like to be able to add some padding here, but it would be great if I could also shrink these key squares, or even give them rounded corners.

I don't see any Line Chart or Tooltip settings that control this little square.

I thought maybe it shared options from the Legends configuration, but no.

JS Bin Example

I'm using Chart.bundle.min.js 2.3.0.

1
chart.js

1 Answers

1
votes

I did something like this to add some padding. Not ideal but I don't know another way.

  tooltips: {
    callbacks: {
      title: function(tooltipItem, data) {
        return tooltipItem[0].xLabel;
      },
      label: function(tooltipItem, data) {
        return ' ' + data.datasets[tooltipItem.datasetIndex].label + ' ' + tooltipItem.yLabel;
      }

Basically adding the padding manually

return ' ' + ... + tooltipItem.yLabel;

Probably more helpfully, see Edit tooltips in ChartJS