chartjs / chartjs/Chart.js

Strikethrough on legend being too thick on small label size

Open
#11,692 0 comments 0 reactions 0 assignees View on GitHub
type: enhancement
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Feature Proposal

Based on legend strikethough implementation([code1](https://github.com/chartjs/Chart.js/blob/7736ea32da0a93f89d20d59861dd8821a2802447/src/plugins/plugin.legend.js#L368
), [code2](https://github.com/chartjs/Chart.js/blob/7736ea32da0a93f89d20d59861dd8821a2802447/src/helpers/helpers.canvas.ts#L403-L432)), 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](https://github.com/chartjs/Chart.js/assets/11649092/5a57dacf-3531-42c6-87b7-f7ee1c143457)

### Possible Implementation

Would suggest to calculate `lineWidth` based on font size for legend. A rough idea would be updating [code](https://github.com/chartjs/Chart.js/blob/7736ea32da0a93f89d20d59861dd8821a2802447/src/plugins/plugin.legend.js#L368
) 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](https://github.com/chartjs/Chart.js/assets/11649092/fbd3c9fd-f365-4e6c-a8bd-a9a28b0d0070)

If hard coding ratio here is not acceptable, another option would be providing some option like [the one](https://www.chartjs.org/docs/latest/api/interfaces/RenderTextOpts.html#decorationwidth) for label to customize strikethrough width.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.