amCharts React Tutorial

What is amCharts?

amCharts has a wide varity of charts and maps and is a great choice as a charting library. It is highly customizable and responsive. The primary concerns with amCharts are around its cost for commercial use and the size/load time for the underlying package.

What is React?

React is a popular JavaScript library for building user interfaces, particularly single-page applications where dynamic content needs to be updated without reloading the page. Developed by Facebook (now Meta Platforms), React has grown in popularity due to its simplicity, efficiency, and scalability. It allows developers to build large web applications that can change data without reloading the page, offering a responsive and fluid user experience. React has a virtual DOM for faster manipulation, a component based architecture, and a great community for support. It is efficient, flexible, and widely used in the market.

amCharts React Code Example

Integrating amCharts with React enables you to create highly customizable and interactive charts in your React applications. Below is a basic example of how to set up a simple bar chart using amCharts in a React component.

Step 1: Install amCharts and React

First, ensure that you have React and amCharts installed in your project. If not, you can install them using npm:

npm install @amcharts/amcharts4 react react-dom

Step 2: Create a Chart Component

In this step, you'll create a BarChart component. The component will import the necessary modules from amCharts, initialize the chart, and render it within a specific HTML div element.

import React, { useEffect } from 'react';

import * as am4core from '@amcharts/amcharts4/core';

import * as am4charts from '@amcharts/amcharts4/charts';

import am4themes_animated from '@amcharts/amcharts4/themes/animated';

am4core.useTheme(am4themes_animated);

function BarChart() {

 useEffect(() => {

   let chart = am4core.create("chartdiv", am4charts.XYChart);

   // Add data

   chart.data = [

     { "category": "Category 1", "value": 50 },

     { "category": "Category 2", "value": 60 },

     { "category": "Category 3", "value": 55 }

   ];

   // Create axes

   let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());

   categoryAxis.dataFields.category = "category";

   let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

   // Create series

   let series = chart.series.push(new am4charts.ColumnSeries());

   series.dataFields.valueY = "value";

   series.dataFields.categoryX = "category";

   series.name = "Sales";

   series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";

   series.columns.template.fillOpacity = .8;

   let columnTemplate = series.columns.template;

   columnTemplate.strokeWidth = 0;

   columnTemplate.strokeOpacity = 1;

   return () => {

     chart.dispose();

   };

 }, []);

 return (

   <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div>

 );

}

export default BarChart;

‍

Step 3: Include the Chart Component in Your App

Finally, import and include the BarChart component in your main App component or wherever you'd like the chart to appear.

import React from 'react';

import ReactDOM from 'react-dom';

import BarChart from './BarChart';

function App() {

 return (

   <div className="App">

     <h1>My amCharts Chart</h1>

     <BarChart />

   </div>

 );

}

ReactDOM.render(<App />, document.getElementById('root'));

‍

This example creates a basic bar chart and renders it within a div element. You can expand this example by exploring more configurations and chart types in the amCharts documentation to create more complex and interactive charts in your React applications.