Alex Rivera | Logout

How do I control the tick label size in flot

Asked 2009-01-20T02:26:37.810
10

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?

Edit
Report

1 Answer

1

I used the following:

CSS File/SCSS File

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.html or place where you are plotting the graph area

$.plot($("graph_label"), [dataArrayReference], options);

Ref: @BrentM 's Answer Above

PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work

answered 2013-06-13T06:15:39.720

Your Answer