[Chartjs]-How to get fixed legend and tooltip for dynamically generated data vue-chartjs

by

1đź‘Ť

âś…

Well it prints out an array of labels, because you pass in for one dataset multiple labels.

If you want a label for each datapoint, you need to pass multiple datasets.
The labels, in most charts in chart.js define your X-Axis. For example dates.

Then you define a dataset with a label. Which can have multiple datapoints.
For example, “Usage of Javascript”. In your data array you then have the matching data for the x-axis. If your labels have three values (jan, feb, ma) then your datasets[0].data[] should also have three values. The first would be matching for “Jan”, the second for “Feb” etc.

But thats only one dataset. And only one label for it. So only one entry in the legend. If you want mulitple entries, you need to define multiple datasets.

labels: ['Jan', 'Feb', 'Mar'],
datasets: [
  {
   label: ['Usage of Javascript'], 
   backgroundColor: this.getBackground(),
   data: [10, 20, 22]
  },
  {
   label: ['Usage of PHP'], 
   backgroundColor: this.getBackground(),
   data: [16, 18, 20]
  }
 ]

0đź‘Ť

Answers to the questions:

  1. How do I get legend with this label and colors?

By using legendCallback method in your options object passed to chart

  1. How do I get tool tip showing the label with the data point rather than each labels with the data point?

In Another chart option you can define what you need in tooltip:

  tooltips: {
      mode: 'single',
      callbacks: {
      label: function (tooltipItems) {
      return tooltipItems.yLabel // tooltipItems has other options which can be probed
            }
          },
        }
  1. How would one add an image to the tooltip / label?

Adding an image tag <img src="https://link-to-image" /> in generating legend or tooltip works fine.

Leave a comment