jqPlot custom tick labels

Question

I've got data with X values from 0 to 55. I would like to see these values as a custom text in tick labels. Ideally, I want to specify some callback, like

function tickLabel(tickValue) {
    return "This is " + tickValue;
}

Is it possible?

score 17 · Accepted Answer · answered Feb 13 '12 at 16:19

17

I've found a solution.

xaxis: {
  tickRenderer: $.jqplot.AxisTickRenderer,
  tickOptions: {
    formatter: function(format, value) { return "This is " + value; } 
  }
}

answered Feb 13 '12 at 16:19

HiveHicks

2,294
5
28
42

1

This seems the best general-purpose answer, but I have found two corner-cases to be aware of: (1) it may not work with DateAxisRenderer; (2) should you need to output a label specific to the context of one plot on a page of multiple plots, a formatter will not have this context. In either of these non-standard cases, I would advise monkey-patching jQuery.jqplot.DateTickFormatter or jQuery.jqplot.CanvasAxisTickRenderer.prototype.draw (either via replacement or via wrapping the calls), depending upon what you need. – sdupton Feb 05 '13 at 17:37

score 2 · Answer 2 · answered Feb 13 '12 at 15:58

Use something like:

var line1 = [['This is '.$value, $value], ...]

And call your plot as:

var plot1 = $.jqplot('chart1', [line1], {
    title: 'Title of your plot',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
          angle: -30,
          fontSize: '10pt'
        }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer
      }
    }
  });

jqPlot custom tick labels

2 Answers2

Linked