score:53

Accepted answer

you were close to it !
actually, the attribute you have to edit is not linewidth but borderwidth (in the first example of chart.js docs, you can see the attribute).

as stated in the example of the mdn doc of lineto :

use the beginpath() to begin a path to draw a line on, move the pen with moveto() and use the stroke() method to actually draw the line.

the line is basically a rectangle with a width of 0. then the width of the line is calculated using the rectangle border width.

so you simply have to edit your dataset this way :

datasets: [{
    // ...
    borderwidth: 1 // and not linewidth
    // ...
}]

i also have updated your fiddle with the edit, and you can see that it is working now.

score:2

if this helps, or you still discern this method as presentable you can set the borderwidth relatively high like 50.

datasets:[{
    borderwidth: 50
}]
 //at your options put this
 options: {
            legend: {
                display: true,
                labels: {
                    fontsize: 16, //point style's size is based on font style not boxed width.
                    usepointstyle:true,
                }
            }

you check usepointstyle at the docs https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration


Related Query

More Query from same tag