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' } }] } } })
Click On chart, then you will see a Values filled and category groups Box on right side of graph, then in Values filled, right-click on any values Go to "Series Properties" --> "Border " -- > "Line Width" and then set the size.
Line graphs consist of two axes: x-axis (horizontal) and y-axis (vertical). Each axis represents a different data type, and the points at which they intersect is (0,0). The x-axis is the independent axis because its values are not dependent on anything measured.
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).
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With