Basically chart.js draws pointed edges for line digrams like shown in the documentation: chart.js line dagrams
If there are really big differences in data-values these edges bee quite pointed and overdraw the values a lot and even overlap the points which show the correct value.
To avoid this I want to get rounded edges for lines (but not curved lines!), but I do not have any idea how to realize this. Does anybody know a way to do it?
(The only workaround I found so far was to set tension to a very small value like e.g. 0.02 but that's really not the most accurate way...)
Best
Basically chart.js draws pointed edges for line digrams like shown in the documentation: chart.js line dagrams
If there are really big differences in data-values these edges bee quite pointed and overdraw the values a lot and even overlap the points which show the correct value.
To avoid this I want to get rounded edges for lines (but not curved lines!), but I do not have any idea how to realize this. Does anybody know a way to do it?
(The only workaround I found so far was to set tension to a very small value like e.g. 0.02 but that's really not the most accurate way...)
Best
Share Improve this question edited Jul 18, 2018 at 9:27 Hirschferkel asked Jul 17, 2018 at 17:20 HirschferkelHirschferkel 3295 silver badges20 bronze badges3 Answers
Reset to default 8Chart.js has an option, borderJoinStyle, for configuring the type of join used for line plots. The available values are round, bevel, or miter. The following image from MDN (as linked to by the Chart.js documentation on this option) illustrates the style of each value, respectively:
Example usage:
options: {
elements: {
line: {
borderJoinStyle: 'round'
}
}
}
You need to set tension value from 0, to > 0.
Doc: documentation chart js
Example code:
options: {
elements: {
line: {
tension: 0.5
}
}
}
Result:
You can set in Options the lineTension to 0 enter image description here