How to make two lines thicker in Chart JS
As you can see in the fiddle , I have used Chart JS to make the chart . There are three lines in this chart. I'm going to make the orange and yellow lines thicker than they are. The green dotted line is good.
I searched everywhere and tried a few things. But I haven't found the correct solution yet. I hope my question is clear and hope someone can help me.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js" charset="utf-8"></script>
<canvas id="canvas2"></canvas>
javascript
Chart.defaults.global.legend.display = false;
var lineChartData = {
labels: ['20°', '30°', '40°', '50°', '60°', '70°', '80°'],
datasets: [{
data: [null, null, null, 400, 320, 220, 90],
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
borderColor: '#FFEC8B',
pointBorderWidth: 0,
pointHoverRadius: 0,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 0,
lineWidth: 100,
pointRadius: 0,
pointHitRadius: 0,
},{
data: [550, 520, 470, 400, null, null, null],
borderColor: '#ff8800',
pointBorderWidth: 0,
pointHoverRadius: 0,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 0,
pointRadius: 0,
pointHitRadius: 0,
},
{
data: [220, 220, 220, 220, 220, 220, 220],
borderColor: '#008080',
borderDash: [10, 10],
pointBorderWidth: 0,
pointHoverRadius: 0,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 0,
pointRadius: 0,
pointHitRadius: 0,
}
]
};
var ctx = document.getElementById("canvas2").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
beginAtZero: true,
scaleOverride:true,
scaleSteps:9,
scaleStartValue:0,
lineWidth: 100,
scaleStepWidth:100,
data: lineChartData,
options: {
elements: {
line: {
fill: false
}
},
style: {
strokewidth: 10
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Temperatuur - Celcius'
}
}],
yAxes: [{
display: true,
ticks: {
max: 600,
min: 0,
stepSize: 200,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join('.');
return value + '%';
}
},
scaleLabel: {
display: true,
labelString: 'Rendement'
}
}]
}
}
})
You are close!
Actually, the property you have to edit is not, lineWidthbut borderWidth( you can see that in the first example in the Chart.js documentation ).
As the example from the MDN documentation states :
lineTo
Use beginPath() to start drawing the path of the line, moveTo() to move the pen, and the stroke() method to actually draw the line.
The line is basically a rectangle with a width of 0. Then, use the rectangle border width to calculate the width of the line.
So you just need to edit the dataset this way:
datasets: [{
// ...
borderWidth: 1 // and not lineWidth
// ...
}]
I also updated your fiddle with the edit , you can see it's working now.