how to enable scroll bar with reactjs?

Question

I googled and they said I need highstock module, but I don't want use <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script> (I don't know where to import it..) is there a react way to import highstock module?

I have tried this:

import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import HC_more from 'highcharts/highcharts-more';
    <HighchartsReact
                    allowChartUpdate={true}
                    updateArgs={[true, true, true]}
                    hicharts={Highcharts}
                    options={chartConfig}
                    ref={chart}
                ></HighchartsReact>

and the chartConfig:

const chartOption = {
    chart: {
      type: "bar"
    },
    scrollbar: {
      enabled: true
    },
    xAxis: {
      scrollbar: {
        enabled: true
      },
      min: 0,
      max: 2,
    },
    series: [
      {
        name: "Browsers",
        colorByPoint: true,
        data: chartData
      }
    ]
  };

it just not work for me . here is the demo: https://stackblitz.com/edit/react-highchart-jjzjx118

Your title and your question is entirely different, what are you really looking for — Akhil Aravind, Jan 20 '20 at 11:03
sorry, I am looking for the way enable scroll bar with react-highcharts, I have tried some way but not work. I'm not sure the problem is about import highstock module or else. — jjzjx118_2, Jan 20 '20 at 15:15

score 2 · Accepted Answer · edited Sep 27 '22 at 07:31

2

You have already imported Highcharts here:

import Highcharts from 'highcharts/highstock';

You should be able to enable the scrollbar in this way:

scrollbar: {
  enabled: true
}

Live demo: https://codesandbox.io/s/highcharts-react-demo-2dwcc

edited Sep 27 '22 at 07:31

Sunil Kumar Singh

301
3
15

answered Jan 20 '20 at 11:13

ppotaczek

36,341
2
14
24

thanks for your answer, your demo works fine, but it's not work in my demo :https://stackblitz.com/edit/react-highchart-jjzjx118 can you take a look at it? I think the config is totally same – jjzjx118_2 Jan 20 '20 at 15:12
Hi @jjzjx118_2, You need to change: `` to `` – ppotaczek Jan 20 '20 at 15:25
thanks you ... I can't believe I made such a stupid mistake.. – jjzjx118_2 Jan 20 '20 at 15:34

how to enable scroll bar with reactjs?

1 Answers1