CODEWITHSUNDEEP
highcharts
nike
nike

Reputation: 745

Customizing X axis Highcharts, adding custom markers under the X axis

I'm trying to implement this use case as the attached image.

Creating this custom chart using Highcharts the chart ticks are inside the chart the issue I'm facing is adding some custom markers under the X axis for some values (The yellow ones with +).

enter image description here

Upvotes: 1

Views: 696

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

For now the only way seems to be to use Highcharts.SVGRenderer class and create custom shapes - circle, text and path. You can easy calculate pixels position based on x-axis and y-axis through toPixels method.

Example:

events: {
  load: function() {
    var xAxis = this.xAxis[0],
      yAxis = this.yAxis[0],
      r = 10,
      distance = 40,
      y = yAxis.toPixels(0),
      x = xAxis.toPixels(3);

    this.renderer.text('+', x, y + distance + r, 'circle')
      .css({
        transform: 'translate(-50%, -50%)'
      }).add();

    this.renderer.circle(x, y + distance, r).attr({
      fill: '#FCFFC5',
      stroke: 'black',
      'stroke-width': 1
    }).add();

    this.renderer.path(['M', x, y, 'L', x, y + distance - r])
      .attr({
        'stroke-width': 1,
        stroke: 'black'
      })
      .add();
  }
}

Live demo: http://jsfiddle.net/BlackLabel/ukfocb7y/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

Upvotes: 3

Related Questions