Chartjs-ChartJS different border color for legend

by

2👍

The only way I have found to do this and some other customisation on the legend is to implement the legend item interface.

The accepted answer here in combination with the legend item interface should be a good start.

Here’s a jsfiddle that I made from that answer, but updated for chartjs 3.7.1. The main part to focus on is this:

options: {
plugins: {
  legend: {
    labels: {
      usePointStyle: true,

      generateLabels: function(chart) {
        var data = chart.data;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map(function(label, i) {
          
            var meta = chart.getDatasetMeta(0);
            var ds = data.datasets[0];
            return {
              text: label,
              fillStyle: ds.backgroundColor[i],
              strokeStyle: ds.legendOutline[i],
              lineWidth: ds.borderWidth,
              hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
              index: i
            };
          });
        } else {
          return [];
        }
      }
    }
  }
}

strokeStyle is the outline property, and I’ve made a field in the dataset called legendOutline. legendOutline and the data from the dataset are both referenced with i, so the legendOutline[i] points to the label representing data[i]

Leave a comment