Implementation Of amCharts In React

Introduction

 

What is React?

ReactJs is bascially an open-source JavaScript library, used to build user interfaces for specific applications on a single page. It is used for web and mobile app view layer management. We can also create reusable components of the UI in react.

NOTE: ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model – View – Controller).

ReactJS was developed by Jordan Walke, a software engineer working at Facebook. Facebook implemented ReactJS in 2011 in its newsfeed section, but it was released to the public in May 2013. After the implementation of ReactJS, Facebook’s UI underwent drastic improvement. This resulted in satisfied users and a sudden boost in its popularity.  

Features

    One-way data binding with props:

     Properties (props) are passed to a component as an attribute from parent component.  

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

   States in components

   States hold values throughout the component and can be passed to child components through props: 

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

    Virtual DOM

   

The "virtual Document Object Model" or "virtual DOM" is another notable feature. React creates a cache for the data structure in the memory, calculates the resulting differences and then effectively updates the browser's DOM. This enables the programmer to write code as if the page is displayed as a whole for each change, while the React libraries only make changes in subcomponents.

 

    Testability

React views can be used as functions of the state (state is an object which determines how a component will render and behave). Thus, we can easily manipulate with state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug

      

BENEFITS

1. Single Page Application.
2. Entire page remains same but only few components change.
3. Code is easy to scale and maintain.
4. More functionalities as HTML is created from JS
5. Isomorphic Rendering(Server side rendering)
6. Blazing speed

What is amCharts?

A go-to library for data visualization. You can use amCharts if you need a simple yet powerful and flexible drop-in data visualization solution. amCharts 4 includes both charts and geographical maps.

Benefits of Charts over Grid

1. Increasing precision when graphs are large.
2. Enhancing the perception of small differences.
3. Assisting the comparison of values along the categorical scale.
4. Narrowing the focus to a specific area. 

Final Output

 

Live Preview With Code

 

https://codesandbox.io/s/km8kwx0ylv

 

Implementation

 

Create a React app

To create a React app you must have Node 8.10.0 or later installed on your local machine.

You can download Node.Js from here ( https://nodejs.org/en/download/current/ )

 

To create a new app, you have to run one of the following commands:

npx create-react-app my-app

OR

npm init react-app my-app

OR

yarn create react-app my-app

After creating your app, you have to run the following commands:

cd chartapp

npm install

npm start

Install amCharts

npm install @amcharts/amcharts4

Create Data Source

In this example I have used .JSX file that exports data for our chart, you can use Web API, JSON File or any other data source.

In this data source, I have created a const variable named SalesData, which is exported as a default. We will use this variable in our Chart component.

const SalesData = [{
    "date": "2013-01-16",
    "market1": 71,
    "market2": 75,
    "sales1": 5,
    "sales2": 8
}, {
    "date": "2013-01-17",
    "market1": 74,
    "market2": 78,
    "sales1": 4,
    "sales2": 6
}, {
    "date": "2013-01-18",
    "market1": 78,
    "market2": 88,
    "sales1": 5,
    "sales2": 2
}, {
    "date": "2013-01-19",
    "market1": 85,
    "market2": 89,
    "sales1": 8,
    "sales2": 9
}, {
    "date": "2013-01-20",
    "market1": 82,
    "market2": 89,
    "sales1": 9,
    "sales2": 6
}, {
    "date": "2013-01-21",
    "market1": 83,
    "market2": 85,
    "sales1": 3,
    "sales2": 5
}, {
    "date": "2013-01-22",
    "market1": 88,
    "market2": 92,
    "sales1": 5,
    "sales2": 7
}, {
    "date": "2013-01-23",
    "market1": 85,
    "market2": 90,
    "sales1": 7,
    "sales2": 6
}, {
    "date": "2013-01-24",
    "market1": 85,
    "market2": 91,
    "sales1": 9,
    "sales2": 5
}, {
    "date": "2013-01-25",
    "market1": 80,
    "market2": 84,
    "sales1": 5,
    "sales2": 8
}, {
    "date": "2013-01-26",
    "market1": 87,
    "market2": 92,
    "sales1": 4,
    "sales2": 8
}, {
    "date": "2013-01-27",
    "market1": 84,
    "market2": 87,
    "sales1": 3,
    "sales2": 4
}, {
    "date": "2013-01-28",
    "market1": 83,
    "market2": 88,
    "sales1": 5,
    "sales2": 7
}, {
    "date": "2013-01-29",
    "market1": 84,
    "market2": 87,
    "sales1": 5,
    "sales2": 8
}, {
    "date": "2013-01-30",
    "market1": 81,
    "market2": 85,
    "sales1": 4,
    "sales2": 7
}]
export default SalesData;

Create a Component for Chart

Create a Component for Sales Chart. It’s good to use separate folder for Charts, Components, Forms, Etc. For code structure.

First, we have to import amCharts libraries in our component.

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

Second, we have to import data for our chart in our component. Path varies based on where you have created your data source.

import SalesData from '../../Data/SalesData'

Third, create chart and add data.

 

componentDidMount() is a lifecycle method, which calls after the component loads. In the code example below we have set the theme, creating chart and setting datasource.

 

am4core.useTheme() Themes in amCharts 4 are much more than just collections of appearance settings. They can change the way a chart acts, looks, and even modify and create chart objects. Plus, you can apply several themes to a single chart such as Material, Dark, Frozen etc. 

 

am4core.create() is a function to create chart, we have to pass id of the div in which chart will render as a first parameter, and type of chart as a second parameter. In this example I have used XYChart but you can use other chart as well like Pie Chart, Map Chart, Radar Chart, TreeMap and Gauge Chart. 

 

chart.data "data" is a property of amCharts in which we assign a varible that holds data. It can be an array or json or object based on the type of charts you have used.

 

componentDidMount() {

        // Use theme
        am4core.useTheme(am4themes_animated);

        // Create Chart
        let chart = am4core.create("SalesChart", am4charts.XYChart);  // here Saleschart is the ID of a div

        // Add data
        chart.data = SalesData;
}

Fourth, Define Series, Axes, Cursor, Legend and Scrollbar. 

 

chart.xAxes.push(new am4charts.DateAxis()); To create a X-Axis of Date Type.

chart.yAxes.push(new am4charts.ValueAxis()); To create Y-Axis  of Value type. You can create multiple Y-Axis as well for each series.

 

chart.series.push(new am4charts.ColumnSeries()); To create a column series; for example, target sales in the current example.

 

chart.series.push(new am4charts.LineSeries()); To create a line series like "Market Days" in the current example

 

Finally the complete component will look like this.

import React, { Component } from 'react'
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import SalesData from '../../Data/SalesData'

export default class Sales extends Component {

    componentDidMount() {

        am4core.useTheme(am4themes_animated);

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

        // Add data
        chart.data = SalesData;

        // Create axes
        let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        //dateAxis.renderer.grid.template.location = 0;
        //dateAxis.renderer.minGridDistance = 30;

        let valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis1.title.text = "Sales";

        let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis2.title.text = "Market Days";
        valueAxis2.renderer.opposite = true;
        valueAxis2.renderer.grid.template.disabled = true;

        // Create series
        let series1 = chart.series.push(new am4charts.ColumnSeries());
        series1.dataFields.valueY = "sales1";
        series1.dataFields.dateX = "date";
        series1.yAxis = valueAxis1;
        series1.name = "Target Sales";
        series1.tooltipText = "{name}\n[bold font-size: 20]${valueY}M[/]";
        series1.fill = chart.colors.getIndex(0);
        series1.strokeWidth = 0;
        series1.clustered = false;
        series1.columns.template.width = am4core.percent(40);

        let series2 = chart.series.push(new am4charts.ColumnSeries());
        series2.dataFields.valueY = "sales2";
        series2.dataFields.dateX = "date";
        series2.yAxis = valueAxis1;
        series2.name = "Actual Sales";
        series2.tooltipText = "{name}\n[bold font-size: 20]${valueY}M[/]";
        series2.fill = chart.colors.getIndex(0).lighten(0.5);
        series2.strokeWidth = 0;
        series2.clustered = false;
        series2.toBack();

        let series3 = chart.series.push(new am4charts.LineSeries());
        series3.dataFields.valueY = "market1";
        series3.dataFields.dateX = "date";
        series3.name = "Market Days";
        series3.strokeWidth = 2;
        series3.tensionX = 0.7;
        series3.yAxis = valueAxis2;
        series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]";

        let bullet3 = series3.bullets.push(new am4charts.CircleBullet());
        bullet3.circle.radius = 3;
        bullet3.circle.strokeWidth = 2;
        bullet3.circle.fill = am4core.color("#fff");

        let series4 = chart.series.push(new am4charts.LineSeries());
        series4.dataFields.valueY = "market2";
        series4.dataFields.dateX = "date";
        series4.name = "Market Days ALL";
        series4.strokeWidth = 2;
        series4.tensionX = 0.7;
        series4.yAxis = valueAxis2;
        series4.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]";
        series4.stroke = chart.colors.getIndex(0).lighten(0.5);
        series4.strokeDasharray = "3,3";

        let bullet4 = series4.bullets.push(new am4charts.CircleBullet());
        bullet4.circle.radius = 3;
        bullet4.circle.strokeWidth = 2;
        bullet4.circle.fill = am4core.color("#fff");

        // Add cursor
        chart.cursor = new am4charts.XYCursor();

        // Add legend
        chart.legend = new am4charts.Legend();
        chart.legend.position = "top";

        // Add scrollbar
        chart.scrollbarX = new am4charts.XYChartScrollbar();
        chart.scrollbarX.series.push(series1);
        chart.scrollbarX.series.push(series3);
        chart.scrollbarX.parent = chart.bottomAxesContainer;

        this.chart = chart;
    }

    componentWillUnmount() {
        if (this.chart) {
            this.chart.dispose();
        }
    }
    render() {
        return (
            <div>
                <div id="SalesChart" style={{ width: "100%", height: "500px" }}></div>
            </div>
        )
    }
}

Import Chart Component on Your Page,

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SalesChart from './Components/Charts/Sales';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" width="200" height="200" />
          <SalesChart />
        </header>
      </div>
    );
  }
}

export default App;