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, lineWidth
but 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.