Applying custom style on ticks of Highchart

Question

I want to apply custom style on xAis ticks of Highcharts. I want to style ticks in the form of circle instead of line. like ticks.chart.renderer.cirlce();

Not able to find a way to get it done.

Answer 1

You can wrap getMatkPath function, to render another tick, see: http://jsfiddle.net/Yrygy/83/

Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function (prev, x, y, tickLength, tickWidth, horiz, renderer) {
    return renderer.circle(x, y, tickLength);
});

Edit:

When using zoom/panning etc from Highcharts or Highstock, it is required to returned data from getMarkPath is array of path (d for SVG).

For example: http://jsfiddle.net/AVhaL/1/

Update: (2016-01-28):

In Highcharts 4.2.x new method is required (we should return path for tickmark, not the rendered object):

Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function(prev, x, y, tickLength, tickWidth, horiz, renderer) {
  return renderer.symbol('circle', x - tickLength / 2, y - tickLength / 2, tickLength, tickLength);
});