tags:

views:

1129

answers:

1

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?

+5  A: 

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% }
Yeah I discovered this myself but forgot to followup by closing this question. The CSS changes have some "interesting" effects in IE when zooming a page up to say 120% unfortunately - though IE isn't a great candidate for flot at the best of times really!Thanks for the confirmation!
Bittercoder