Я пытаюсь построить временной ряд, но я не получаю фондовые инструменты, как в левой части этого графика.Пример с сайта Highstocks: введите описание ссылки здесь
Код с опциями:
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;
Вот что отображается:
Что идет не так?
РЕДАКТИРОВАТЬ:
После применения предложений @ppotaczek.Я получаю это:
Обновленный код:
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;