How can I draw dotted line using chartjs?

Question

I would like to draw dotted line using chartjs. I did not see any options in creating dotted lines. I feel we need to extend the chartjs to support this. Can some one help me in this?

Answer 1

For dotted lines use borderDash and borderCapStyle. The following example creates a dotted line (3px diameter):

data: {
  datasets: [
    {
        data           : data,
        borderWidth    : 3, // set diameter of dots here
        borderColor    : '#ccc',
        fill           : false,
        pointRadius    : 0,
        borderDash     : [0,6], // set 'length' of dash/dots to zero and
                                // space between dots (center to center)
                                // recommendation: 2x the borderWidth
        borderCapStyle : 'round' // this is where the magic happens
    }
  ]
}

Output

Output (better contrast for demonstration)

Answer 2

In Chart.js 2.1+, use the borderDash option within your dataset. It takes an array of two numbers. See this codepen