[IMP] chart: avoid overlapping values on charts #5028
Conversation
The option "Show Values" on charts could lead to overlapping texts in the chart, which was quite ugly. This commit improve the behaviour or the value labels: - prevent overlapping value labels on stacked charts - the bar chart value labels are now in the middle of the bar - the value labels have now the same color as the dataset - prevent value labels from going outside of the chart Code-wise, the commit totally splits the handling of bar and horizontal bar charts. It make the code slightly longer, but avoid having to write a ternary for each computation of x/y position, which ultimately makes the code more readable. Task: 4207889
|
|
| }, | ||
| }; | ||
| ctx.fillStyle = point.options.backgroundColor; | ||
| ctx.strokeStyle = options.background || "#ffffff"; |
There was a problem hiding this comment.
Not 100% sure about this one, if you have a very light grey dataset color and no background, the text value becomes unreadable. Maybe having the stroke computed based on point.options.backgroundColor would be better to ensure the text is visible?
fyi, there are 2 datasets in the picture :p
There was a problem hiding this comment.
Having the text stroke be the same color as the background is ususally prettier. Here for example if we do a white or black text bacgrkound it's not as pretty :
But indeed there are cases where it'll be ugly. I was thinking that if the user pick shitty colors that's his problem, GSheet does the same:
I'll ask Francois
Yeah I wasn't sure what to target. I'd say either 17.4 where we introduced the feature or master |
|
backported to 16.4 #5099 |
Description
The option "Show Values" on charts could lead to overlapping texts in the chart, which was quite ugly.
This commit improve the behaviour or the value labels:
Code-wise, the commit totally splits the handling of bar and horizontal bar charts. It make the code slightly longer, but avoid having to write a ternary for each computation of x/y position, which ultimately makes the code more readable.
Task: 4207889
review checklist