Fix borders and spacing on high dpr displays

[cloudflare-workers-and-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	3a4e999
Status:	✅  Deploy successful!
Preview URL:	https://4e5603ee.chartjs-chart-treemap.pages.dev
Branch Preview URL:	https://borders.chartjs-chart-treemap.pages.dev

View logs

[github-actions[bot]]

Size Change: +866 B (+4%)

Total Size: 23 kB

Filename	Size	Change
dist/chartjs-chart-treemap.esm.js	8.47 kB	+330 B (+4%)
dist/chartjs-chart-treemap.js	8.71 kB	+331 B (+4%)
dist/chartjs-chart-treemap.min.js	5.87 kB	+205 B (+4%)

_{compressed-size-action}

[stockiNail]

Therefore it was related to dpr?

[kurkle]

Therefore it was related to dpr?

yes, it is. this is still not good enough though.

[stockiNail]

Apologize but this evening I was busy. I was thinking to fallback to the previous logic drawing border over the background. Anyway I dont understand how it could work in chartjs for the bars

[stockiNail]

I have also to admit that I will never discover it was related to dpr…

[kurkle]

borderWidth: 0.5

DPR=1

DPR=2

[kurkle]

ok, fixed the borderWidth: 0.5, dpr=1 case

Still got some issue with rtl

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

86.9% Coverage
0.0% Duplication

[stockiNail]

It looks like a very annoying issue... but FMI, what do you think it has generated this issue? Some updates? was always there?

[kurkle]

It looks like a very annoying issue... but FMI, what do you think it has generated this issue? Some updates? was always there?

Looks like it broke (for docs) in this commit: https://github.com/kurkle/chartjs-chart-treemap/commit/9deba20de5e9a528bf3830ec7935a9e728c09684

I guess it is some change in Chart.js from 3.7.0 to 3.9.1

EDIT: oops, I thought this was a discussion in issue #146

[kurkle]

It looks like a very annoying issue... but FMI, what do you think it has generated this issue? Some updates? was always there?

To answer in this scope, I think it was always there, but as the bordes were drawn on top of the background, it was not so obvious / annoying.

There is a similar issue in chart.js bar charts, and there is a inflateAmount option used to address it. Datalabels uses the same "rasterize" technique to keep fonts sharp (this should probably be applied to label drawing too)

[stockiNail]

EDIT: oops, I thought this was a discussion in issue #146

:D