Dotted Line in ChartJS

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,

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: {
<script src=""></script>
<script src="" ></script>

    <div class="myChartDiv" style="height:500px">
      <canvas id="myChart" width="600" height="300"></canvas>

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How can I run nodemon from within WebStorm?

Similar Posts