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
For now i have downloaded the indented version of chart.js and made following changes
var fillText = function(x, y, legendItem, textWidth) {
var halfFontSize = fontSize / 2;
var xLeft = boxWidth + halfFontSize + x;
var yMiddle = y + halfFontSize;
if (legendItem.hidden) {
// Strikethrough the text if hidden , comment out the strikethrough code
/*ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(xLeft, yMiddle);
ctx.lineTo(xLeft + textWidth, yMiddle);
ctx.stroke();*/
ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();
}
ctx.fillText(legendItem.text, xLeft, yMiddle);
ctx.fillStyle = fontColor;
};
and in order to change the legend box color alter the drawLegendBox function as follow
if(legendItem.hidden){
ctx.fillStyle = "#D6D6D6";
ctx.strokeStyle = "#D6D6D6";
}else{
ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);
}
i do understand this is not the right way to do. However, i really don't know how would i extend the Legend and override just the required part.