How do I control the tick label size in flot

Bittercoder picture Bittercoder · Jan 20, 2009 · Viewed 22.2k times · Source

I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).

$.plot($("#placeholder"), [
    {
        label: 'Failed',
        data: [[0,10]],
        bars: { show: true }
    },
    {
        label: 'Passed',
        data: [[1,15]],
        bars: { show: true }
    },
    {
        label: 'Not Run',
        data: [[2,30]],
        bars: { show: true }
    },
    {
        label: 'Blocked',
        data: [[3,5]],
        bars: { show: true }
    },
    {
        label: 'In Progress',
        data: [[4,40]],
        bars: { show: true }
    }
],
{
    xaxis: {
        ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
    },
    legend: {
        show: false
    }
});

I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.

Is this possible OOTB?

Answer

Brent M picture Brent M · Mar 20, 2009

It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.

.tickLabel { font-size: 80% }