-
Notifications
You must be signed in to change notification settings - Fork 94
/
App.js
55 lines (44 loc) · 1.34 KB
/
App.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
import React, { Component } from 'react';
import Highcharts from 'highcharts';
import {
HighchartsChart, withHighcharts, Title, XAxis, YAxis, TreemapSeries, Legend
} from 'react-jsx-highcharts';
import ExampleCode from '../utils/ExampleCode';
import code from './exampleCode';
const colorAxis = {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
};
class App extends Component {
constructor (props) {
super(props);
this.state = {
treemapData: [
{ name: 'A', value: 6, colorValue: 1 },
{ name: 'B', value: 6, colorValue: 2 },
{ name: 'C', value: 4, colorValue: 3 },
{ name: 'D', value: 3, colorValue: 4 },
{ name: 'E', value: 2, colorValue: 5 },
{ name: 'F', value: 2, colorValue: 6 },
{ name: 'G', value: 1, colorValue: 7 }
]
};
}
render () {
const treemapData = this.state.treemapData;
return (
<div className="app">
<HighchartsChart colorAxis={colorAxis}>
<Title>Highcharts Treemap</Title>
<Legend />
<XAxis />
<YAxis>
<TreemapSeries name="Tree" data={treemapData} layoutAlgorithm="squarified" />
</YAxis>
</HighchartsChart>
<ExampleCode name="Treemap">{code}</ExampleCode>
</div>
);
}
}
export default withHighcharts(App, Highcharts);