dashed ticklines/gridlines in flot

Question

I am pretty new to this flot API. I want to have dashed gridlines/ticklines instead of solid line both X-axis' and Y-axis'. Can anyone help me with this??

Thanks in advance!

Answer 1

I was able to produce dashed lines for the grid's markings by modifying the library. I'm currently using Flot ver 0.8.0

First I added a new attribute under grid (around line 400), just below the markingsLineWidth:

markingsStyle: 'dashed'

Since Flot is using canvas to render the charts, I added a dashedLineTo() extension for the canvas using this code from David Owens. I added it just right after the color parser plugin on top of the Flot's code, with credits given to David. The dashedLineTo() has the following parameters:

dashedLineTo(fromX, fromY, toX, toY, pattern)

For the pattern, I used [5,5] which means there will alternating 5px of dash, and 5px of space.

Finally I modified the drawGrid function in the plugin, when the markings are being drawn.

if(options.grid.markingsStyle == 'dashed') {
    ctx.dashedLineTo(xrange.from, yrange.from, xrange.to, yrange.to, [5,5])
} else {
    ctx.moveTo(xrange.from, yrange.from);
    ctx.lineTo(xrange.to, yrange.to);
}

Just thought you can use this as a reference when modifying the library.

Answer 2

Unfortunately Flot doesn't currently provide a way to change grid/tick line styles. You would have to modify the library itself.