Change label color when disabled (instead of standard styles)

[aneuwald]

Hello! I thought would be simple, but I'm having a hard time trying to figure this out!

I want to be able to, once a dataset is disabled (Line Chart in my case, and disable I mean click in the legend and the data is hidden), instead of having a line upon the legend name, I would like to change it to another color, red for instance.

ChartJS.defaults.plugins.legend.onClick = function click(e, legendItem, legend) {
  const index = legendItem.datasetIndex;
  const { chart } = legend;
  const isVisible = chart.isDatasetVisible(index);
  chart.setDatasetVisibility(index, !isVisible);

  const fillTextValue = chart.ctx.fillText;
  chart.ctx.fillText = function fillText(text: string, x: number, y: number) {
    fillTextValue.bind(chart.ctx, text, x, y)();
    this.fillStyle = 'rgb(255,0,0)';
  };

  chart.update();
};

This was the best I could get, change the color of the line, not of the text!

Please, could you inform me a way (if it is possible) to achieve the change of color when disabled?
Thanks!

[LeeLenaleee]

You can use a custom generateLabels function for this:

generateLabels: function(chart) {
  const datasets = chart.data.datasets;
  const {
    labels: {
      usePointStyle,
      pointStyle,
      textAlign,
      color
    }
  } = chart.legend.options;

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

    return {
      text: datasets[meta.index].label,
      fillStyle: style.backgroundColor,
      fontColor: hidden ? 'red' : color,
      hidden: hidden,
      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);
}

https://jsfiddle.net/bxfmqpwv/

[aneuwald]

Perfect! I had to adapt a little bit cause I'm using in react, but wow, worked like a charm!

Thanks for the quick response!

Cheers!

[eduAbreu-finaloop]

@aneuwald where you able to make this work fine with react?
I'm having a issue that the color is affecting all the legends, when I click one all of them are changing colors.

Did you had this issue?