Creating a financial analytics dashboard is an important task for businesses and individuals who want to monitor and manage their finances effectively. In this article, we will discuss how to create a financial analytics dashboard using React.js and chart.js. We will provide step-by-step instructions along with code examples to help you create your own dashboard.
Introduction to React.js and Chart.js
React.js is an open-source JavaScript library used for building user interfaces or UI components. It was developed by Facebook and is widely used by developers to create web applications. React.js allows developers to create reusable UI components that can be easily managed and updated.
Chart.js is an open-source JavaScript library used for creating charts and graphs. It provides a wide range of chart types such as line, bar, pie, and scatter charts. Chart.js is easy to use and customizable, making it an ideal choice for creating financial analytics dashboards.
Step 1: Setting up the Environment
To get started with our financial analytics dashboard, we need to set up our environment. We will use create-react-app, which is a tool for creating React.js applications.
To create a new React.js application, open your terminal and type the following command:
npx create-react-app financial-analytics-dashboard
This command will create a new React.js application named financial-analytics-dashboard. Once the application is created, navigate to the project directory using the following command:
cd financial-analytics-dashboard
Next, we need to install chart.js and react-chartjs-2 packages using npm, which is a package manager for JavaScript.
npm install chart.js react-chartjs-2
Step 2: Creating the Dashboard Component
Now that our environment is set up, we can start creating the dashboard component. In the src folder, create a new file named Dashboard.js.
import React from "react";
import { Chart, registerables } from "chart.js";
import { Line } from "react-chartjs-2";
Chart.register(...registerables);
const Dashboard = () => {
return (
<div className="chart-container">
<h1>Financial Analytics Dashboard</h1>
<Line
data={{
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "Sales",
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,
},
{
label: "Expenses",
data: [5, 12, 9, 3, 5, 2],
fill: false,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1,
},
],
}}
height={400}
width={600}
options={{
maintainAspectRatio: false,
scales: {
y: {
ticks: {
beginAtZero: true,
},
},
},
}}
/>
</div>
);
};
export default Dashboard;
In this code example, we have created a functional component named Dashboard. The component returns a div element that contains a Line chart. The Line chart displays the sales and expenses data for the first six months of the year.
The Line chart is created using the Line component provided by react-chartjs-2. We have passed the data, height, width, and options props to the Line component. The data prop contains the labels and datasets arrays.
Step 3: Adding Data to the Dashboard
To make our financial analytics dashboard more useful, we need to add real data to it. In this step, we will create a data.json file in the public folder and add the sales and expenses data to it.
{
"sales": [
{
"month": "Jan",
"amount": 12000
},
{
"month": "Feb",
"amount": 19000
},
{
"month": "Mar",
"amount": 3000
},
{
"month": "Apr",
"amount": 5000
},
{
"month": "May",
"amount": 2000
},
{
"month": "Jun",
"amount": 3000
}
],
"expenses": [
{
"month": "Jan",
"amount": 5000
},
{
"month": "Feb",
"amount": 12000
},
{
"month": "Mar",
"amount": 9000
},
{
"month": "Apr",
"amount": 3000
},
{
"month": "May",
"amount": 5000
},
{
"month": "Jun",
"amount": 2000
}
]
}
In this example, we have created a JSON object that contains two arrays, sales and expenses. Each array contains objects that represent the sales or expenses for a specific month. The month property represents the month of the year, and the amount property represents the sales or expenses amount.
Step 4: Fetching Data from the JSON File
Now that we have our data in the data.json file, we need to fetch it in our Dashboard component. We can use the useEffect hook provided by React.js to fetch the data when the component is mounted.
import React, { useState, useEffect } from "react";
import { Chart, registerables } from "chart.js";
import { Line } from "react-chartjs-2";
Chart.register(...registerables);
const Dashboard = () => {
const [data, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
const response = await fetch("data.json");
const json = await response.json();
setData(json);
};
fetchData();
}, []);
return (
<div>
<h1>Financial Analytics Dashboard</h1>
<Line
data={{
labels: data.sales ? data.sales.map((item) => item.month) : [],
datasets: [
{
label: "Sales",
data: data.sales ? data.sales.map((item) => item.amount) : [],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,
},
{
label: "Expenses",
data: data.expenses
? data.expenses.map((item) => item.amount)
: [],
fill: false,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1,
},
],
}}
height={400}
width={600}
options={{
maintainAspectRatio: false,
scales: {
y: {
ticks: {
beginAtZero: true,
},
},
},
}}
/>
</div>
);
};
export default Dashboard;
In this code, we import the useEffect hook and define a state variable called data using the useState hook. In the useEffect hook, we define a fetchData async function that fetches the data from the data.json file and sets the data state variable using the setData function.
In the return statement of the Dashboard component, we render a Line chart using the Line component provided by the react-chartjs-2 library. We pass the sales and expenses data to the chart using the data prop. We also set the chart height and width using the height and width props, respectively. Finally, we set some chart options using the options prop, such as the maintainAspectRatio option that disables the aspect ratio of the chart and the scales option that sets the y-axis ticks to begin at zero.
Step 5: Styling the Dashboard
Finally, we can add some styles to our financial analytics dashboard to make it look more appealing. We can do this by adding a CSS file to our project and importing it into our Dashboard component.
Create a file called Dashboard.css in the src folder with the following styles:
.chart-container {
position: relative;
margin: auto;
height: 40vh;
width: 80vw;
}
@media screen and (max-width: 800px) {
.chart-container {
height: 60vh;
width: 90vw;
}
}
In this example, we define a chart-container class that sets the position to relative, centers the container horizontally, and sets the height to 40vh and width to 80vw. We also define a media query that sets the height to 60vh and width to 90vw for screens with a maximum width of 800px.
Now, import the CSS file into our Dashboard component:
import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import './Dashboard.css';
const Dashboard = () => {
return (
<div className="chart-container">
// ...
In this code, we import the Dashboard.css file by using the import statement and setting the relative path to the CSS file. We also add the Dashboard.css class to the div element that contains the Line chart by using the className prop.
Conclusion
In this tutorial, we have learned how to create a financial analytics dashboard with React.js and Chart.js. We started by creating a new React.js project using the create-react-app command. Then, we installed the Chart.js library and created a new Dashboard component. We added a Line chart to the Dashboard component and fetched real data from a JSON file. Finally, we added some styles to our dashboard using a CSS file.
With this tutorial, you should now have a good understanding of how to create a financial analytics dashboard with React.js and Chart.js. You can now use this knowledge to create your own financial analytics dashboard or any other data visualization project using React.js and Chart.js.