Highstocks not showing stock tools

Question

I am trying to plot a time-series but I am not getting the stock tools as in the left-side of this chart. Example from the highstocks website: enter link description here

The code with options:

import React from 'react';
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'


class Graph extends React.Component {
    getOptions = (dataSets) => {
        return {
            yAxis: [{
                labels: {
                    align: 'left'
                },
                height: '80%',
                resize: {
                    enabled: true
                }
            }, {
                labels: {
                    align: 'left'
                },
                top: '80%',
                height: '20%',
                offset: 0
            }],

            title: {
                text: 'Summary'
            },

            series: [{
                name: 'INFY',
                data: dataSets.data
            }]
        };
    };

    render() {
        const {dataSets} = this.props;
        const options = this.getOptions(dataSets);

        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={'stockChart'}
                    options={options}
                />
            </div>
        )
    }
}

export default Graph;

Here is what is rendered:

What is going wrong?

EDIT:

After applying the suggestions by @ppotaczek. I get this:

Updated code:

import React from 'react';
import Highcharts from "highcharts/highstock";
import indicatorsAll from "highcharts/indicators/indicators-all";
import annotationsAdvanced from "highcharts/modules/annotations-advanced";
import priceIndicator from "highcharts/modules/price-indicator";
import fullScreen from "highcharts/modules/full-screen";
import stockTools from "highcharts/modules/stock-tools";
import HighchartsReact from "highcharts-react-official";


indicatorsAll(Highcharts);
annotationsAdvanced(Highcharts);
priceIndicator(Highcharts);
fullScreen(Highcharts);
stockTools(Highcharts);


class Graph extends React.Component {
    getOptions = (dataSets) => {
        return {
            yAxis: [{
                labels: {
                    align: 'left'
                },
                height: '80%',
                resize: {
                    enabled: true
                }
            }, {
                labels: {
                    align: 'left'
                },
                top: '80%',
                height: '20%',
                offset: 0
            }],

            title: {
                text: 'Summary'
            },

            series: [{
                name: 'INFY',
                data: dataSets.data
            }]
        };
    };

    render() {
        const {dataSets} = this.props;
        const options = this.getOptions(dataSets);

        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={'stockChart'}
                    options={options}
                />
            </div>
        )
    }
}

export default Graph;

Answer 1

You need load CSS styles and import and initialize all of the required modules:

import indicatorsAll from "highcharts/indicators/indicators-all";
import annotationsAdvanced from "highcharts/modules/annotations-advanced";
import priceIndicator from "highcharts/modules/price-indicator";
import fullScreen from "highcharts/modules/full-screen";
import stockTools from "highcharts/modules/stock-tools";

indicatorsAll(Highcharts);
annotationsAdvanced(Highcharts);
priceIndicator(Highcharts);
fullScreen(Highcharts);
stockTools(Highcharts);

Live demo: https://codesandbox.io/s/highcharts-react-demo-3s8v7

Docs: https://www.highcharts.com/docs/stock/stock-tools