[Chartjs]-How to draw round edges with chart.js for line diagrams

by

8👍

✅

Chart.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:

enter image description here

Example usage:

options: {
    elements: {
        line: {
            borderJoinStyle: 'round'
        }
    }
}

6👍

You need to set tension value from 0, to > 0.

Doc: documentation chart js

Example code:

options: {
    elements: {
        line: {
            tension: 0.5
        }
    }
}

Result:
enter image description here

-3👍

You can set in Options the lineTension to 0
enter image description here

Leave a comment