remove strikethrough behavior in chart.js bar chart

Question

i am trying to change the look of the legends by removing the strikethrough effect , wihtout using legendCallback function in chart.js. The reason why i do not want to use the legendCallback function because i have my own custmizations in chart.options.legend.onClick. hence if i use legendCallback i won't be able to use the chart.options.legend.onClick.

after carefully looking at the source of Chart.js i come to know that inside a draw function of Chart.Legend they are applying the strikethrough effect.

Here is the link to plugin.legend.js

and here is the piece of code that applies the styling

    var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;

            ctx.fillText(legendItem.text, xLeft, yMiddle);

            if (legendItem.hidden) {
                // Strikethrough the text if hidden
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.moveTo(xLeft, yMiddle);
                ctx.lineTo(xLeft + textWidth, yMiddle);
                ctx.stroke();
            }
        };

i want to know how shall we able to alter the behavior of the strikethrough just apply the fade effect when the legend is not active or hidden.

while searching for solution i came across this codepen where in some has tried to override the functionality but unfortunately it is now working properly with the chart.js version 2.7.3

Link to my fiddle

Answer 1

I know this post is old (I don't think there are rules against posting on older posts) but in case anyone comes across this you can simply set onClick to null like this: (as well as change the legend's text color and size)

        options: {
          plugins: {
            legend: {
              onClick: null,
              labels: {
                color: "white",
                font: {
                  size: 18
                }
              }
            }
          }
        }
      }

Answer 2

I found a better way doing that:

add onClick to legends and put this :

  const index = legendItem.datasetIndex;
  const ci = legend.chart;
  const isVisible = ci.isDatasetVisible(index);
  ci.setDatasetVisibility(index, !isVisible);


  // this is where the stroke remove happens
  const ci = legend.chart;

  const fillTextValue = ci.ctx.fillText;
  ci.ctx.fillText = function fillText(x, v, b) {
    fillTextValue.bind(ci.ctx, x, v, b)();
    this.fillStyle = "rgba(0,0,0,0)"; // whatever color you like
  };