Question

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. 240×100. I’ve read the API documentation, but can’t find how to control the tick label sizes.

Is this possible OOTB?

Answer 1

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% }