Hello,
I believe there is some issue with the text in my charts.
Ideally, a chart should look this way
But, in my case, the text seems to be blurry and too smooth. It doesn’t look sharp/clean at all.
Following are the options I am using:
options: {
animation: {
duration: 5000,
easing: "easeOutBounce"
},
tooltips: {
mode: "label"
},
bar: {
stacked: true
},
scales: {
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: {!! ($individualStatsMax+1) !!},
}
}]
},
legend: {
labels: {
boxWidth: 10,
fontSize: 14
}
}
}
Now, I understand the first image isn’t ChartJs, so the font family can be different, but why is the text not sharp at all? Is this happening because of the theme I am using? If yes, what really can it be? Is there a way to fix this from ChartJs only?? If no, what else can be causing this?
Thanks,
I faced this today on Chrome latest version, literally wasted 3 hours to chase it.
Finally it turned out that issue only occurs only when browser zoom is reduced less than 100%%, resetting window zoom to 100%% resolved the issue.
Hope this info helps the developers to reproduce and fix the bug!!!
https://github.com/apache/incubator-echarts/ which is also Canvas based, doesn’t have this issue.
I think there is something to be done here (yes I don’t know what).
We can’t expect the user to not use the zoom.
Can you, at least, reopen it?
Make sure that you don’t adding some css to the canvas element.
In my case I found that I am adding border property to the canvas element what was causing the problem of blur on text and bars.
dont use something like that :
or with id or class like that :