CODEWITHSUNDEEP
javascripthighchartsreact-highcharts
Romina
Romina

Reputation: 315

Decide which serie goes into range-selector highstock

I have a chart with 3 different series and I've included Range Selector from Highstock. I want to be able to select which one of the 3 series is the one set in the Range-Selector. Is there any way to dynamically assign the serie to the Range Selector?

I create the chart with 3 series like this:

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

What I want to accomplish is to be able to select either A,B or C as the serie active to see in the Range-Selector preview.

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

Upvotes: 0

Views: 326

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can show each series in navigator by setting series.line.showInNavigator = true. To set it dynamically use series.update() method where you can pass new options for series.

Code:

let dates = [1496268000000, 1504216800000, 1512082800000, 1519858800000, 1527804000000, 1535752800000, 1543618800000, 1551394800000, 1559340000000, 1567288800000];

let aSerie = dates.map((e, i) => [e, i < 5 ? null : i]);
let bSerie = dates.map((e, i) => [e, i + 1]);
let cSerie = dates.map((e, i) => [e, i * 2]);

Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        const chart = this;

        setTimeout(() => {
          chart.series[1].update({
            showInNavigator: false
          });
        }, 2000);
      }
    }
  },
  rangeSelector: {
    verticalAlign: 'top'
  },
  series: [{
    name: "aSerie",
    showInNavigator: true,
    data: aSerie
  }, {
    name: "bSerie",
    showInNavigator: true,
    data: bSerie
  }, {
    name: "cSerie",
    showInNavigator: true,
    data: cSerie
  }]
});

Demo:

API reference:

Upvotes: 1

Related Questions