Amcharts4 React

A react wrapper component for @amcharts/amcharts4 where (any) chart is rendered using JSON config pattern of @amcharts/amcharts4 and also taking care of updates to the rendered charts.

Install

npm install --save react-amcharts4

Usage

1import React from "react";
2
3import AmChart4Wrapper from "react-amcharts4";
4
5import { PieChart } from "@amcharts/amcharts4/charts";
6
7// Configure any reguired theme
8import * as am4core from "@amcharts/amcharts4/core";
9import am4themes_material from "@amcharts/amcharts4/themes/material";
10
11am4core.useTheme(am4themes_material);
12
13const config = {
14  // Create pie series
15  series: [
16    {
17      type: "PieSeries",
18      dataFields: {
19        value: "litres",
20        category: "country"
21      }
22    }
23  ],
24  // Add data
25  data: [
26    {
27      country: "Lithuania",
28      litres: 501.9
29    },
30    {
31      country: "Czech Republic",
32      litres: 301.9
33    },
34    {
35      country: "Ireland",
36      litres: 201.1
37    },
38    {
39      country: "Germany",
40      litres: 165.8
41    },
42    {
43      country: "Australia",
44      litres: 139.9
45    },
46    {
47      country: "Austria",
48      litres: 128.3
49    },
50    {
51      country: "UK",
52      litres: 99
53    },
54    {
55      country: "Belgium",
56      litres: 60
57    },
58    {
59      country: "The Netherlands",
60      litres: 50
61    }
62  ]
63};
64
65const onChartCreated = chartInstance => {
66  // Callback with chartInstance
67};
68
69const Demo = props => {
70  return (
71    <div style={{ width: "80%", margin: "0 auto" }}>
72      <AmCharts4Wrapper
73        config={config}
74        id="amcharts-4"
75        chartTypeClass={PieChart}
76        onChartCreated={onChartCreated}
77      />
78    </div>
79  );
80};
81
82export default Demo;

Note: For information on the chart's config, refer @amcharts/amchart4 documentation.

License

MIT © Abhishek Ramesh