Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove grid lines from Flot chart

Tags:

bar-chart

flot

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?

like image 438
Firoz Avatar asked Jan 29 '14 09:01

Firoz


2 Answers

You can remove the lines, use tickLength: 0

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

Fiddle here.

like image 87
Mark Avatar answered Sep 26 '22 09:09

Mark


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

like image 36
Sergio Avatar answered Sep 22 '22 09:09

Sergio