CODEWITHSUNDEEP
highcharts
Yngve Høiseth
Yngve Høiseth

Reputation: 590

How to set default zoom to 6 months using highcharts-react?

I have a couple of highcharts-react charts where the default zoom level should be 6 months (for the x-axis). There's a solution for using the default Highcharts library, but I don't understand how to do it using React.

This is how far I got:


// …

import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import more from "highcharts/highcharts-more";

// …

if (typeof Highcharts === "object") {
  more(Highcharts);
}

// …

<HighchartsReact
  highcharts={Highcharts}
  constructorType={"stockChart"}
  options={{
    credits: {
      enabled: false
    },
    xAxis: {
      events: {
        setExtremes: () => {
          // Is this right? What should be in this function?
        }
      }
    },
    series: [
      {
        type: "candlestick",
        name: props.timeSeries.name,
        data: openHighLowClose
      }
    ]
  }}
/>

Upvotes: 1

Views: 1895

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I see that you are creating a stockChart, so in this case you can set the displaying range with using the rangeSelector feature.

Below is a demo where I set the selected button to 2, which is equal to 6 months by default. More information you can find in the API which I posted above.

Demo: https://codesandbox.io/s/highcharts-react-demo-yjtgj

Upvotes: 1

Related Questions