Remove the tick bar on flot charts

Question

Is it possible to remove the tick bars on the x and y axis on a flot chart?

picture of what I currently have

I want to remove the gray bar between the two series labels

Answer 1

Have you tried to configure your axes like:

xaxis: {
  tickLength: 0
}

yaxis: {
  tickLength: 0
}

Reference here .

Update in response to your last comment

Since there is no such option one possible workaround could be to color the tickbar the same as your chart background and the ticks like you have it right now.

xaxis: {   
  color: /* same as your background color */
  tickColor: /* different color, like the grayish one you have for the ticks */
}

yaxis: {   
  color: /* same as your background color */
  tickColor: /* different color, like the grayish one you have for the ticks */
}

Hope it helps

Answer 2

I ended up changing the flot source code to allow this to occur.

Here's what I did.

1) added 'tickBar' to the x/yaxis options. (if true, tickBar is shown.. default: true) 2) change the drawGrid function to use this option

drawGrid()
...

//draw the ticks
axes = allAxes();
bw = options.grid.borderWidth;
xBar = (options.xaxis.tickBar !== undefined)? options.xaxis.tickBar:true; //new
yBar = (options.yaxis.tickBar !== undefined)? options.yaxis.tickBar:true; //new

...

if(!axis.innermost){
ctx.strokeStyle = axis.options.color;
ctx.beginPath();
xoff = yoff = 0;
if(axis.direction == "x"){
    if(xBar) //new
        xoff = plotWidth + 1; // new
} else {
    if(yBar) //new
        yoff = plotHeight + 1; //new
}

When tickBar is set to false, the offset remains 0 so the line is drawn with a 0 value for width/height so it is not seen.