Skip to content

Commit 45d525c

Browse files
PauanPauan
committed
Updating documentation for 3.0.0
1 parent 9b9c6ae commit 45d525c

10 files changed

Lines changed: 329 additions & 230 deletions

File tree

‎README.md‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ How to install
88
"devDependencies": {
99
"react": "^15.4.2",
1010
"react-dom": "^15.4.2",
11-
"@amcharts/amcharts3-react": "^2.0.0"
11+
"@amcharts/amcharts3-react": "^3.0.0"
1212
}
1313
}
1414
```
@@ -44,24 +44,37 @@ How to use
4444

4545
```js
4646
React.createElement(AmCharts.React, {
47-
"type": "serial",
48-
"theme": "light",
49-
"graphs": [...],
50-
"dataProvider": [...]
47+
style: {
48+
width: "100%",
49+
height: "500px"
50+
},
51+
options: {
52+
"type": "serial",
53+
"theme": "light",
54+
"graphs": [...],
55+
"dataProvider": [...]
56+
}
5157
})
5258
```
5359

5460
Or alternatively if you are using JSX:
5561

5662
```js
5763
<AmCharts.React
58-
type="serial"
59-
theme="light"
60-
graphs={[...]}
61-
dataProvider={[...]} />
64+
style={{
65+
width: "100%",
66+
height: "500px"
67+
}}
68+
options={{
69+
"type": "serial",
70+
"theme": "light",
71+
"graphs": [...],
72+
"dataProvider": [...]
73+
}}
74+
/>
6275
```
6376

64-
You can also pass the entire config object:
77+
You can also define the options object separately:
6578

6679
```js
6780
var config = {
@@ -71,12 +84,12 @@ var config = {
7184
"dataProvider": [...]
7285
};
7386

74-
<AmCharts.React {...config} />
87+
<AmCharts.React options={config} />
7588
```
7689

77-
The configuration is exactly the same as the [`AmCharts.makeChart`](https://docs.amcharts.com/3/javascriptcharts/AmCharts#makeChart) method.
90+
The `options` property supports exactly the same configuration as the [`AmCharts.makeChart`](https://docs.amcharts.com/3/javascriptcharts/AmCharts#makeChart) method, so all of the [AmCharts demos](https://www.amcharts.com/demos/) work the same.
7891

79-
Changes to the configuration are automatically detected when rendering (you do not need to call [`validateNow`](https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#validateNow) or [`validateData`](https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#validateData)).
92+
Changes to `options` are automatically detected when rendering (you do *not* need to call [`validateNow`](https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#validateNow) or [`validateData`](https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#validateData)).
8093

8194
In addition, this plugin automatically generates an `id`, so you do not need to specify it.
8295

@@ -99,6 +112,12 @@ You can see an example program in the `examples/webpack-export` folder. It updat
99112

100113
## Changelog
101114

115+
### 3.0.0
116+
117+
* Rather than passing in the configuration directly, instead you must pass in the configuration using the new `options` property.
118+
119+
* Adding in `delay` property for controlling the chart delay.
120+
102121
### 2.0.7
103122

104123
* Reverting the code which waits for the chart to initialize.

‎documentation/Migrating to 3.0.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
Migrating to amCharts React plugin 3.0
2+
======================================
3+
4+
* If you are not using JSX:
5+
6+
Old syntax
7+
----------
8+
9+
```js
10+
React.createElement(AmCharts.React, {
11+
"width": "100%",
12+
"height": "500px",
13+
"type": "serial",
14+
"theme": "light",
15+
"graphs": [...],
16+
"dataProvider": [...]
17+
})
18+
```
19+
20+
New syntax
21+
----------
22+
23+
```js
24+
React.createElement(AmCharts.React, {
25+
style: {
26+
width: "100%",
27+
height: "500px"
28+
},
29+
options: {
30+
"type": "serial",
31+
"theme": "light",
32+
"graphs": [...],
33+
"dataProvider": [...]
34+
}
35+
})
36+
```
37+
38+
* If you are using JSX:
39+
40+
Old syntax
41+
----------
42+
43+
```js
44+
<AmCharts.React
45+
width="100%",
46+
height="500px"
47+
type="serial"
48+
theme="light"
49+
graphs={[...]}
50+
dataProvider={[...]}
51+
/>
52+
53+
<AmCharts.React {...config} />
54+
```
55+
56+
New syntax
57+
----------
58+
59+
```js
60+
<AmCharts.React
61+
style={{
62+
width: "100%",
63+
height: "500px"
64+
}}
65+
options={{
66+
"type": "serial",
67+
"theme": "light",
68+
"graphs": [...],
69+
"dataProvider": [...]
70+
}}
71+
/>
72+
73+
<AmCharts.React options={config} />
74+
```

‎examples/create-react-app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"devDependencies": {
6-
"@amcharts/amcharts3-react": "^2.0.1",
6+
"@amcharts/amcharts3-react": "^3.0.0",
77
"react": "^15.4.2",
88
"react-dom": "^15.4.2",
99
"react-scripts": "0.9.5"

‎examples/create-react-app/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ class App extends Component {
127127

128128
return (
129129
<div className="App">
130-
<AmCharts.React {...config} />
130+
<AmCharts.React options={config} />
131131
</div>
132132
);
133133
}

‎examples/script/example.js‎

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -48,77 +48,79 @@ var Chart = createReactClass({
4848
render: function () {
4949
// Render the chart
5050
return React.createElement(AmCharts.React, {
51-
"type": "serial",
52-
"theme": "light",
53-
"marginRight": 40,
54-
"marginLeft": 40,
55-
"autoMarginOffset": 20,
56-
"mouseWheelZoomEnabled": true,
57-
"valueAxes": [{
58-
"id": "v1",
59-
"axisAlpha": 0,
60-
"position": "left",
61-
"ignoreAxisWidth": true
62-
}],
63-
"balloon": {
64-
"borderThickness": 1,
65-
"shadowAlpha": 0
66-
},
67-
"graphs": [{
68-
"id": "g1",
69-
"balloon":{
70-
"drop": true,
71-
"adjustBorderColor": false,
72-
"color":"#ffffff"
51+
options: {
52+
"type": "serial",
53+
"theme": "light",
54+
"marginRight": 40,
55+
"marginLeft": 40,
56+
"autoMarginOffset": 20,
57+
"mouseWheelZoomEnabled": true,
58+
"valueAxes": [{
59+
"id": "v1",
60+
"axisAlpha": 0,
61+
"position": "left",
62+
"ignoreAxisWidth": true
63+
}],
64+
"balloon": {
65+
"borderThickness": 1,
66+
"shadowAlpha": 0
7367
},
74-
"bullet": "round",
75-
"bulletBorderAlpha": 1,
76-
"bulletColor": "#FFFFFF",
77-
"bulletSize": 5,
78-
"hideBulletsCount": 50,
79-
"lineThickness": 2,
80-
"title": "red line",
81-
"useLineColorForBulletBorder": true,
82-
"valueField": "value",
83-
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
84-
}],
85-
"chartScrollbar": {
86-
"graph": "g1",
87-
"oppositeAxis": false,
88-
"offset":30,
89-
"scrollbarHeight": 80,
90-
"backgroundAlpha": 0,
91-
"selectedBackgroundAlpha": 0.1,
92-
"selectedBackgroundColor": "#888888",
93-
"graphFillAlpha": 0,
94-
"graphLineAlpha": 0.5,
95-
"selectedGraphFillAlpha": 0,
96-
"selectedGraphLineAlpha": 1,
97-
"autoGridCount": true,
98-
"color":"#AAAAAA"
99-
},
100-
"chartCursor": {
101-
"pan": true,
102-
"valueLineEnabled": true,
103-
"valueLineBalloonEnabled": true,
104-
"cursorAlpha":1,
105-
"cursorColor":"#258cbb",
106-
"limitToGraph":"g1",
107-
"valueLineAlpha":0.2,
108-
"valueZoomable": true
109-
},
110-
"valueScrollbar":{
111-
"oppositeAxis": false,
112-
"offset":50,
113-
"scrollbarHeight":10
114-
},
115-
"categoryField": "date",
116-
"categoryAxis": {
117-
"parseDates": true,
118-
"dashLength": 1,
119-
"minorGridEnabled": true
120-
},
121-
"dataProvider": this.state.dataProvider
68+
"graphs": [{
69+
"id": "g1",
70+
"balloon":{
71+
"drop": true,
72+
"adjustBorderColor": false,
73+
"color":"#ffffff"
74+
},
75+
"bullet": "round",
76+
"bulletBorderAlpha": 1,
77+
"bulletColor": "#FFFFFF",
78+
"bulletSize": 5,
79+
"hideBulletsCount": 50,
80+
"lineThickness": 2,
81+
"title": "red line",
82+
"useLineColorForBulletBorder": true,
83+
"valueField": "value",
84+
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
85+
}],
86+
"chartScrollbar": {
87+
"graph": "g1",
88+
"oppositeAxis": false,
89+
"offset":30,
90+
"scrollbarHeight": 80,
91+
"backgroundAlpha": 0,
92+
"selectedBackgroundAlpha": 0.1,
93+
"selectedBackgroundColor": "#888888",
94+
"graphFillAlpha": 0,
95+
"graphLineAlpha": 0.5,
96+
"selectedGraphFillAlpha": 0,
97+
"selectedGraphLineAlpha": 1,
98+
"autoGridCount": true,
99+
"color":"#AAAAAA"
100+
},
101+
"chartCursor": {
102+
"pan": true,
103+
"valueLineEnabled": true,
104+
"valueLineBalloonEnabled": true,
105+
"cursorAlpha":1,
106+
"cursorColor":"#258cbb",
107+
"limitToGraph":"g1",
108+
"valueLineAlpha":0.2,
109+
"valueZoomable": true
110+
},
111+
"valueScrollbar":{
112+
"oppositeAxis": false,
113+
"offset":50,
114+
"scrollbarHeight":10
115+
},
116+
"categoryField": "date",
117+
"categoryAxis": {
118+
"parseDates": true,
119+
"dashLength": 1,
120+
"minorGridEnabled": true
121+
},
122+
"dataProvider": this.state.dataProvider
123+
}
122124
});
123125
}
124126
});

‎examples/script/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
"react": "^15.4.2",
77
"react-dom": "^15.4.2",
88
"create-react-class": "^15.5.2",
9-
"@amcharts/amcharts3-react": "^2.0.0"
9+
"@amcharts/amcharts3-react": "^3.0.0"
1010
}
1111
}

0 commit comments

Comments
 (0)