[Chartjs]-How change color of labels of legends of chart.js

by

2👍

To achieve what you want you will need to use a custom generateLabels function like so:

const legendColors = ['red', 'blue']
const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: (chart) => {
            const datasets = chart.data.datasets;
            const {
              labels: {
                usePointStyle,
                pointStyle,
                textAlign,
                color
              }
            } = chart.legend.options;

            return chart._getSortedDatasetMetas().map((meta, i) => {
              const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
              const borderWidth = Chart.helpers.toPadding(style.borderWidth);

              return {
                text: datasets[meta.index].label,
                fillStyle: style.backgroundColor,
                fontColor: legendColors[i],
                hidden: !meta.visible,
                lineCap: style.borderCapStyle,
                lineDash: style.borderDash,
                lineDashOffset: style.borderDashOffset,
                lineJoin: style.borderJoinStyle,
                lineWidth: (borderWidth.width + borderWidth.height) / 4,
                strokeStyle: style.borderColor,
                pointStyle: pointStyle || style.pointStyle,
                rotation: style.rotation,
                textAlign: textAlign || style.textAlign,
                borderRadius: 0, // TODO: v4, default to style.borderRadius

                // Below is extra data used for toggling the datasets
                datasetIndex: meta.index
              };
            }, this);
          }
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

-1👍

Did you try the hex format ?
For example, you could try replacing "rgb(14, 156, 255)" by "#0e9cff"

More info here : https://devsheet.com/code-snippet/change-color-of-the-line-in-chartjs-line-chart/

Leave a comment