Chartjs-Concatenate on tooltip from data array in chart js

by

0👍

✅

Beside the tooltip label callback, you also need to define interaction mode ‘dataset’.

options: {
  interaction: {
    mode: 'dataset'
  },
  plugins: {
    tooltip: {
      callbacks: {
        label: context => context.label + ': ' + context.formattedValue + '%'
      }
    }
  }
}

Please take a look at below runnable code and see how it works.

var myChart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
        label: 'Net Profit Margin',
        data: [18, 19, 21, 20]
      },
      {
        label: 'Gross Profit Margin',
        data: [57, 54, 57, 59]
      },
    ]
  },
  options: {
    interaction: {
      mode: 'dataset'
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: context => context.label + ': ' + context.formattedValue + '%'
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Leave a comment