This tutorial will show you every step you need to use amCharts 5 with React. Please refer to the section of this article that is relevant to how you are using React - with classes or hooks.
Creating a chart
First, create a new React project:
npx create-react-app my-project cd my-project
You can now run your project by using these commands:
npm install npm start
It should automatically load up your project in a browser. If it doesn't, then go to the http://localhost:3000/
URL.
Now it's time to add in an amCharts 5 chart. Use this command to install amCharts 5:
npm install @amcharts/amcharts5
Inside of the src/App.js
file, add the following near the top:
import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
And use this code for the App
class:
class App extends Component { componentDidMount() { const root = am5.Root.new("chartdiv"); // ... chart code goes here ... this.root = root; } componentWillUnmount() { if (this.root) { this.root.dispose(); } } render() { return ( <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div> ); } }
It uses the following three methods:
componentDidMount
is used to create the chart.componentWillUnmount
is used to cleanup the chart when it's done being used.render
is used to create the<div>
which the chart will be displayed inside of.
Here is a full working example:
import React, { Component } from 'react'; import './App.css'; import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; class App extends Component { componentDidMount() { let root = am5.Root.new("chartdiv"); root.setThemes([ am5themes_Animated.new(root) ]); let chart = root.container.children.push( am5xy.XYChart.new(root, { panY: false, layout: root.verticalLayout }) ); // Define data let data = [{ category: "Research", value1: 1000, value2: 588 }, { category: "Marketing", value1: 1200, value2: 1800 }, { category: "Sales", value1: 850, value2: 1230 }]; // Create Y-axis let yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }) ); // Create X-Axis let xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, {}), categoryField: "category" }) ); xAxis.data.setAll(data); // Create series let series1 = chart.series.push( am5xy.ColumnSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value1", categoryXField: "category" }) ); series1.data.setAll(data); let series2 = chart.series.push( am5xy.ColumnSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value2", categoryXField: "category" }) ); series2.data.setAll(data); // Add legend let legend = chart.children.push(am5.Legend.new(root, {})); legend.data.setAll(chart.series.values); // Add cursor chart.set("cursor", am5xy.XYCursor.new(root, {})); this.root = root; } componentWillUnmount() { if (this.root) { this.root.dispose(); } } render() { return ( <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div> ); } } export default App;
Updating chart
If you want to update the chart, you can use the componentDidUpdate
method.
Here is an example:
class App extends Component { componentDidMount() { let root = am5.Root.new("chartdiv"); let chart = root.container.children.push( am5xy.XYChart.new(root, { panY: false, layout: root.verticalLayout, paddingRight: this.props.paddingRight }) ); // ... this.chart = chart; this.root = root; } componentDidUpdate(oldProps) { if (oldProps.paddingRight !== this.props.paddingRight) { this.chart.set("paddingRight", this.props.paddingRight); } } }
When you create the chart you can now pass in a paddingRight
setting, like this:
<App paddingRight={20} />
When your app's state changes, it will call the componentDidUpdate
method, which then checks whether the paddingRight
property has changed, and it then changes the chart.
Using with hooks
Using React hooks, creating the chart would look like this:
function App(props) { useLayoutEffect(() => { let root = am5.Root.new("chartdiv"); // ... root.current = root; return () => { root.dispose(); }; }, []); return ( <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div> ); }
Here's a complete example from this article:
import React, { useRef, useLayoutEffect } from 'react'; import './App.css'; import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; function App(props) { useLayoutEffect(() => { let root = am5.Root.new("chartdiv"); root.setThemes([ am5themes_Animated.new(root) ]); let chart = root.container.children.push( am5xy.XYChart.new(root, { panY: false, layout: root.verticalLayout }) ); // Define data let data = [{ category: "Research", value1: 1000, value2: 588 }, { category: "Marketing", value1: 1200, value2: 1800 }, { category: "Sales", value1: 850, value2: 1230 }]; // Create Y-axis let yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }) ); // Create X-Axis let xAxis = chart.xAxes.push( am5xy.CategoryAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, {}), categoryField: "category" }) ); xAxis.data.setAll(data); // Create series let series1 = chart.series.push( am5xy.ColumnSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value1", categoryXField: "category" }) ); series1.data.setAll(data); let series2 = chart.series.push( am5xy.ColumnSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value2", categoryXField: "category" }) ); series2.data.setAll(data); // Add legend let legend = chart.children.push(am5.Legend.new(root, {})); legend.data.setAll(chart.series.values); // Add cursor chart.set("cursor", am5xy.XYCursor.new(root, {})); return () => { root.dispose(); }; }, []); return ( <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div> ); } export default App;
Updating the chart object looks like this:
function App(props) { const chartRef = useRef(null); useLayoutEffect(() => { let root = am5.Root.new("chartdiv"); let chart = root.container.children.push( am5xy.XYChart.new(root, { panY: false, layout: root.verticalLayout }) ); // ... chartRef.current = chart; return () => { root.dispose(); }; }, []); // When the paddingRight prop changes it will update the chart useLayoutEffect(() => { chartRef.current.set("paddingRight", props.paddingRight); }, [props.paddingRight]); return ( <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div> ); }