-
Notifications
You must be signed in to change notification settings - Fork 0
/
Highstocks.js
74 lines (58 loc) · 2.08 KB
/
Highstocks.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { Component } from 'react';
import Highcharts from 'highcharts/highstock';
import {
HighchartsStockChart, Chart, withHighcharts, XAxis, YAxis, Title, Legend,
AreaSplineSeries, SplineSeries, Navigator, RangeSelector, Tooltip
} from 'react-jsx-highstock';
import ExampleCode from '../utils/ExampleCode';
import code from './exampleCode';
import { createRandomData } from '../utils/data-helpers';
class App extends Component {
constructor (props) {
super(props);
const now = Date.now();
this.state = {
data1: createRandomData(now, 1e7, 500),
data2: createRandomData(now, 1e7, 500)
};
}
render() {
const { data1, data2 } = this.state;
return (
<div className="app">
<HighchartsStockChart>
<Chart zoomType="x" />
<Title>Highstocks Example</Title>
<Legend>
<Legend.Title>Key</Legend.Title>
</Legend>
<Tooltip />
<XAxis>
<XAxis.Title>Time</XAxis.Title>
</XAxis>
<YAxis>
<YAxis.Title>Price</YAxis.Title>
<AreaSplineSeries id="profit" name="Profit" data={data1} />
</YAxis>
<YAxis opposite>
<YAxis.Title>Social Buzz</YAxis.Title>
<SplineSeries id="twitter" name="Twitter mentions" data={data2} />
</YAxis>
<RangeSelector selected={1}>
<RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
<RangeSelector.Button count={7} type="day">7d</RangeSelector.Button>
<RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
<RangeSelector.Button type="all">All</RangeSelector.Button>
<RangeSelector.Input boxBorderColor="#7cb5ec" />
</RangeSelector>
<Navigator>
<Navigator.Series seriesId="profit" />
<Navigator.Series seriesId="twitter" />
</Navigator>
</HighchartsStockChart>
<ExampleCode name="Highstocks">{code}</ExampleCode>
</div>
);
}
}
export default withHighcharts(App, Highcharts);