Line annotation when specified with borderWidth:1, the final width of line is 2px

chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js

MIT License

608 stars 329 forks source link

Line annotation when specified with borderWidth:1, the final width of line is 2px #903

Open skopz356 opened 1 year ago

skopz356 commented 1 year ago

When using line annotation with borderWidth: 1, the final width of the line is 2px. Step to reproduce:

Open https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/line/visibility.html
Screen the website using PixelZoomer
Measure the width of the line "Now"

The width is 2px even when borderWidth is set to 1px.

I would be happy to create a pull request if someone points me to the right direction.

stockiNail commented 1 year ago

@skopz356 thank you very much for this issue.

To support your issue: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines

To fix, we should check the borderWidth if odd or not and then change the annotation element size calculation as described in the document. All annotation element sizes are calculated in the resolveElementProperties(chart, options) method of the annotation elements (in src/types). This will affect also the test cases which should be changed. Let me know if more info are needed to submit a PR. Otherwise I'll have a look asap.

stockiNail commented 1 year ago

@skopz356 maybe it can help, you could try to set borderWidth: 0.5. It doesn't solve completely but improve.