How can I make two of my lines in Chart JS thicker
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 now. The green dotted line is good as it is.
I’ve searched around, and tried some things. But I haven’t found the right solution yet. I hope that my question is clear, and that someone can help me with this.
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 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.
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
