How can I make two of my lines in Chart JS thicker

Question

I have made a chart with Chart JS, as you can see in my fiddle. There are three lines in this chart. I want to have the orange and yellow line to be thicker than it is right

Answer 1

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

Answer 2

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.