How to use Chart.js with Ionic React?

Question

In an Ionic-React app how to draw charts on any particular page using chart.js.

In fact, this is something that made me struggle a lot so I thought to post the question along with the answer so that anyone else can also use it.

Answer 1

React is the framework added by Ionic recently. You may refer following code to display the chart on any particular page.

1. Very first thing you need to install the react-chartjs

npm install --save react-chartjs-2 chart.js

2. Ensure you've basic imports related to UI and Framework

import { IonAvatar, IonButton, IonButtons, IonCard, IonCardContent, 
IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonFab, 
IonFabButton, IonFabList, IonHeader, IonIcon, IonItem, IonItemOption, 
IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, 
IonMenuButton, IonPage, IonText, IonTitle, IonToolbar } from '@ionic/react';

import React, { useState } from 'react';
import './Dashboard.css';
import {addCircle, arrowBackCircle, key, add, addCircleOutline, timeOutline, folderOpen, calendarOutline, cardOutline} from 'ionicons/icons'

3. Imports related to Chart

import { Line, Bar, Pie , Doughnut} from 'react-chartjs-2';

4. UI Code/ Logic

const Dashboard: React.FC = (props) => {

//Set Data for Bar Chart. In Realtime you may bing this using the data coming from API or service. 
const barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
  {
    label: 'My First dataset',
    backgroundColor: 'rgba(255,99,132,0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)',
    data: [65, 59, 80, 81, 56, 55, 40]
  }
]
};

//Set Data for Doughnut Chart. In Realtime you may bing this using the data coming from API or service. 
const doughnutChartData = {
labels: ['Billable', 'Non Billable'],
datasets: [
  {
    label: 'Billable Vs. Non Billable',
    backgroundColor: ['#36a2eb', 'rgba(255,99,132,0.2)'],
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)',
    data: [65, 59]
  }
]
};


return (
<IonPage>
     <IonHeader>
            <IonToolbar  color="secondary">
                <IonButtons slot="start">
                    <IonMenuButton />
                </IonButtons>
                <IonTitle>Dashboard</IonTitle>
            </IonToolbar>
        </IonHeader>
  <IonContent class="ion-padding">
   
        <IonList>
          <IonItem>
            //Bind the Bar Chart with the Data
            <Bar data={barChartData}
                options={{ maintainAspectRatio: true}}   />
          </IonItem>
          <IonItem>
            <Doughnut data={doughnutChartData}
                options={{ maintainAspectRatio: true}}   />
          </IonItem>
          <IonItem>
            <Pie data={doughnutChartData}
                options={{ maintainAspectRatio: true}}   />
          </IonItem>
        </IonList>

  </IonContent>
</IonPage>
);
};

export default Dashboard;