@amcharts/amcharts3-react NPM

How to install

Create a package.json which includes react, react-dom, and @amcharts/amcharts3-react:

{
  "devDependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "@amcharts/amcharts3-react": "^3.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 a bundler (like Webpack), import the @amcharts/amcharts3-react plugin:

import AmCharts from "@amcharts/amcharts3-react";

If you are using <script> tags, include the React and amcharts3-react.js files in your HTML:

<script src="node_modules/react/umd/react.production.min.js"></script>
<script src="node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="node_modules/create-react-class/create-react-class.min.js"></script>
<script src="node_modules/@amcharts/amcharts3-react/amcharts3-react.js"></script>

How to use

React.createElement(AmCharts.React, {
  className: "my-class",
  style: {
    width: "100%",
    height: "500px"
  },
  options: {
    "type": "serial",
    "theme": "light",
    "graphs": [...],
    "dataProvider": [...]
  }
})

Or alternatively if you are using JSX:

<AmCharts.React
  className="my-class"
  style={{
    width: "100%",
    height: "500px"
  }}
  options={{
    "type": "serial",
    "theme": "light",
    "graphs": [...],
    "dataProvider": [...]
  }} />

You can also define the options object separately:

var config = {
  "type": "serial",
  "theme": "light",
  "graphs": [...],
  "dataProvider": [...]
};

<AmCharts.React options={config} />

The options property supports exactly the same configuration as the AmCharts.makeChart method, so all of the AmCharts demos work the same.

Changes to options 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

3.1.1

Adding in support for React 17 and React 18.

3.1.0

Adding in className property for specifying the CSS class for the element.

3.0.3

Fixing version ranges for react and react-dom

3.0.0

Rather than passing in the configuration directly, instead you must pass in the configuration using the new options property.
Adding in delay property for controlling the chart delay.

2.0.7

Reverting the code which waits for the chart to initialize.

2.0.6

It now waits for the chart to initialize before it updates (this fixes some errors).

2.0.5

Republishing 2.0.4

2.0.4

Fixing a deprecation warning with React (thanks to Izumi-kun)
Working around a bug with groupToPeriods

2.0.3

Fixing an error when updating maps

2.0.2

Fixing a warning with React.createClass (thanks to Izumi-kun)

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 than AmCharts