amCharts React Tutorial

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.