CODEWITHSUNDEEP
reactjshighcharts
Romina
Romina

Reputation: 315

Add initial and final date to Range Selector Highstock

I've got a chart with Highstock and a Range-Selector. I can only see a few dates points in the navigator. I want to be able to display the initial date and the final one as well. How can I configure this?

I tried to check with the tick amount and some axis props but not luck found there.

//A,B,C data array
Highcharts.stockChart('container', {
    series: [
      { data: A },
      { data: B },
      { data: C }
    ]
});

What I want is to be able to set a start date and an end date on the range-selector navigator.

Here's a jsfiddle: https://jsfiddle.net/usvonfjh/1/

Upvotes: 1

Views: 831

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

It can be done using navigator.xAxis.tickPositions where you can pass an array with ticks to be displayed and navigator.xAxis.labels.formatter to make readable dates from tick positions timestamps.

Code:

  navigator: {
    xAxis: {
      tickPositions: aSerie.map(elem => elem[0]),
      labels: {
        formatter: function() {
            return Highcharts.dateFormat('%e. %b', this.value);
        },
        align: 'center'
      }
    }
  }

Demo:

API reference:

Upvotes: 1

Related Questions