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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.