How to install
-
Create a
package.json
which includesreact
,react-dom
, and@amcharts/amcharts3-react
:{ "devDependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "@amcharts/amcharts3-react": "^2.0.0" } }
-
Run
npm install
-
Use
<script>
tags in your HTML file to load AmCharts:<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
-
If you are using
<script>
tags, include the React andamcharts3-react.js
files in your HTML:<script src="node_modules/react/dist/react.min.js"></script> <script src="node_modules/react-dom/dist/react-dom.min.js"></script> <script src="node_modules/@amcharts/amcharts3-react/amcharts3-react.js"></script>
If you are using a bundler (like Webpack), import the
@amcharts/amcharts3-react
plugin:var AmCharts = require("@amcharts/amcharts3-react");
How to use
React.createElement(AmCharts.React, {
"type": "serial",
"theme": "light",
"graphs": [...],
"dataProvider": [...]
})
Or alternatively if you are using JSX:
<AmCharts.React
type="serial"
theme="light"
graphs={[...]}
dataProvider={[...]} />
You can also pass the entire config object:
var config = {
"type": "serial",
"theme": "light",
"graphs": [...],
"dataProvider": [...]
};
<AmCharts.React {...config} />
The configuration is exactly the same as the AmCharts.makeChart
method.
Changes to the configuration are automatically detected when rendering (you do not need to call validateNow
or validateData
).
In addition, this plugin automatically generates an id
, so you do not need to specify it.
You can find some examples in the examples
folder.
If you want to use plugins (like dataloader, export, responsive, animate, etc.) you will need to include the appropriate <script>
tags.
Here is an example for the export plugin:
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
You can see an example program in the examples/webpack-export
folder. It updates the chart's dataProvider
every 3 seconds.
Changelog
2.0.0
-
Major breaking change: this plugin no longer automatically imports AmCharts, so you must use
<script>
tags to load AmCharts -
Major breaking change: you must now use
AmCharts.React
rather thanAmCharts
1.1.8
- Fixing another bug with updating the chart data
1.1.7
- Fixing a bug where the chart does not zoom out when changing the
dataProvider
1.1.6
- Fixing a bug where the chart won't show up properly on the first update
1.1.5
- Fixing a bug which caused stock charts to not update correctly
1.1.4
- Deprecating using
AmCharts
with Webpack, instead useAmCharts.React
- Adding in the various global
AmCharts
properties for Webpack
1.1.3
- Fixing a bug that caused the
listeners
to trigger multiple times
1.1.2
1.1.1
- Fixing an issue with
peerDependencies
1.1.0
- Adding in support for npm / Webpack
1.0.0
- Initial release