Menu
I am using the chart from Chart.js to create my charts, and what I want to do is have 2 horizontal lines on the same chart, but one of them should be dotted. I have tried to find solution on Google without success.
Do you have any idea how to do this?
Thanks in advance,
600
You can use the border-dash property for particular dataset. You can specify border length & spacing. E.g borderDash: [10,5]
var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Label1", "Label2", "Label3"], datasets: [{ label: 'legend1', data: [12, 19, 3], borderDash: [10,5] },{ label: 'legend2', data: [22, 9, 13], }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" ></script> <html> <body> <div class="myChartDiv" style="height:500px"> <canvas id="myChart" width="600" height="300"></canvas> </div> </body> </html>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
