How to remove grid lines from Flot chart

16
votes

I am using Flot in my application and it is working fine. I want to remove both vertical lines and horizontal lines from the the background of the chart. I tried this but I am not able to achieve the functionality.

grid: {
    verticalLines:false,
    horizontalLines:false
}

Can anyone help me in this regard?

2
flotbar-chart

2 Answers

39
votes

You can remove the lines, use tickLength: 0

$.plot("#flot", dataset,
{
    yaxis: {tickLength:0}, 
    xaxis: {tickLength:0}
});

Fiddle here.

3
votes

You can paint them the same color as the background.

There is a option called tickColor that you have to use for both axis:

var options = {
    yaxis: {
        tickColor: "#f00" // or same color as background
    },
    xaxis: {
        tickColor: "#0f0" // or same color as background
    }
};

Fiddle