chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.92k stars 11.89k forks source link

Strikethrough on legend being too thick on small label size #11692

Open ChaunceyKiwi opened 4 months ago

ChaunceyKiwi commented 4 months ago

Feature Proposal

Based on legend strikethough implementation(code1, code2), legend strikethrough will always have lineWidth as 2 regardless of actual font size. This issue becomes clearly noticeable on small device as shown below. IMG_0064

Possible Implementation

Would suggest to calculate lineWidth based on font size for legend. A rough idea would be updating code from

renderText(ctx, legendItem.text, x, y + (itemHeight / 2), labelFont, {
  strikethrough: legendItem.hidden,
  textAlign: rtlHelper.textAlign(legendItem.textAlign)
});

to

renderText(ctx, legendItem.text, x, y + (itemHeight / 2), labelFont, {
  strikethrough: legendItem.hidden,
  textAlign: rtlHelper.textAlign(legendItem.textAlign),
  decorationWidth: labelFont.size / 8
});

I tested locally this change and this is before and after: compare

If hard coding ratio here is not acceptable, another option would be providing some option like the one for label to customize strikethrough width.