In Flot, is it possible to eliminate or hide grid ticks without eliminating the corresponding label?

Question

The Flot API documentation describes the library's extensive hooks for customizing the axes of a graph. You can set the number of ticks, their color, etc. separately for each axis. However, I can not figure out how to prevent Flot from drawing the vertical grid lines without also removing the x-axis labels. I've tried changing the tickColor, ticks, and tickSize options with no success.

I want to create beautiful, Tufte-compatible graphs such as these:

http://www.robgoodlatte.com/wp-content/uploads/2007/05/tufte_mint.gif http://www.argmax.com/mt_blog/archive/RealGDP_graph.jpg

I find the vertical ticks on my graphs to be chart junk. I am working with a time series that I am displaying as vertical bars so the vertical ticks often cut through the bars in a way that is visually noisy.

Solution 1

As Laurimann noted, Flot continues to evolve. The ability to control this has been added to the API (as noted in the flot issue Nelson linked to).

If you download the latest version (which is still labeled 0.6), you can disable lines on an axis with "tickLength", like so:

xaxis: {
  tickLength: 0
}

Rather annoyingly, this addition hasn't been updated in the API documentation.

Solution 2

This post comes over two years later than OP and Flot (now version 0.6) might have evolved a lot during that time or maybe there's better options than it around but in either case here's my contribution.

I accidentally bumped into a workaround for this problem: set grid's tick color's alpha channel to fully transparent. For example:

var options =   {
      grid:   {show: true,
               color: "rgb(48, 48, 48)",
               tickColor: "rgba(255, 255, 255, 0)",
               backgroundColor: "rgb(255, 255, 255)"}
    };

Works for me.

Solution 3

To Avoid ticks in the options just give ticks:[] in the corresponding axis

Solution 4

After some digging around, I'm quite sure that it is not possible through the Flot API. Nevertheless, if you get really dirty, you could do it - I have published a modified version of one example which does it. View source shows the whole uglyness.

Solution 5

Starting June 2009 there's flot issue 167 which is a request for this exact feature. Includes two implementations and some agreement from the flot author that it's a good idea.

View more solutions

Comments

[dfrankow]

The links are broken.

[DerDee]

So would it be accurate to summarize your approach as: 1) use tiny ticks on the axis so that they won't actually show up; 2) build the labels yourselves using custom divs with calculated absolute styling to make sure they get in the right place?

[DerDee]

It seems like this is very close to how many of the Flot internals work :)

[DerDee]

Any way you could wrap it up and submit it to them as a patch? (PS. Thanks for the answer; I think you're right and am going to accept it now.)

[Alex Gyoshev]

yup, that's the idea. I've copied some code from the drawing functions - they'll need some modifications, but I guess I can submit it soon :)

[Darren]

Good point Kevin. Yes, I had to get this from the trunk too.They should iterate the version number and add this to the primary download.

[Derrick Rice]

The addition was updated in the trunk's API documentation when I looked. It's not in one of the downloads, you must get both the JS and the API doc from the repository.

[ChrisFletcher]

@KevinLewis flot has now moved to github github.com/flot/flot Googlecode is now out of date