Building an Interactive Sales Dashboard with React and Chart.js

Monday, January 20, 2025

In this tutorial, I’ll show you how to create a fully interactive sales dashboard with React and Chart.js, ensuring it updates dynamically as filters are applied.

What We'll Build

A sales dashboard that:

Displays total sales trends with a clean, interactive chart.

Lets users filter data by region or product dynamically.

Updates the chart automatically based on selected filters.

Can be deployed online to share with your team.

Step 1: Setting Up the Project

We’ll start by creating a new project with Vite for a faster setup:

Language: bash

npm create vite@latest sales-dashboard --template react
cd sales-dashboard
npm install
npm run dev

Then, install the required dependencies:

Language: bash

npm install chart.js react-chartjs-2

Step 2: Fetching Sales Data

For this example, I’ll assume you have a sales API returning data in this format:

Language: json

[
  { "region": "North", "product": "A", "date": "2025-01-01", "sales": 120 },
  { "region": "South", "product": "B", "date": "2025-01-02", "sales": 200 }
]

Set up a function to fetch the data based on the selected filters:

Language: javascript

import React, { useState, useEffect } from 'react';

function SalesDashboard() {
  const [salesData, setSalesData] = useState([]);
  const [filters, setFilters] = useState({ region: 'all', product: 'all' });

  useEffect(() => {
    const query = new URLSearchParams(filters).toString();
    fetch(`/api/sales?${query}`)
      .then((res) => res.json())
      .then((data) => setSalesData(data));
  }, [filters]);

  return (
    <div>
      <h1>Sales Dashboard</h1>
      <div>
        <select
          onChange={(e) => setFilters({ ...filters, region: e.target.value })}
          value={filters.region}
        >
          <option value="all">All Regions</option>
          <option value="North">North</option>
          <option value="South">South</option>
        </select>

        <select
          onChange={(e) => setFilters({ ...filters, product: e.target.value })}
          value={filters.product}
        >
          <option value="all">All Products</option>
          <option value="A">Product A</option>
          <option value="B">Product B</option>
        </select>
      </div>
      <SalesChart data={salesData} />
    </div>
  );
}

export default SalesDashboard;

Step 3: Visualizing Sales Data

Let’s create a line chart to visualize the sales data dynamically:

Language: javascript

import React from 'react';
import { Line } from 'react-chartjs-2';

function SalesChart({ data }) {
  const chartData = {
    labels: data.map((item) => item.date),
    datasets: [
      {
        label: 'Total Sales',
        data: data.map((item) => item.sales),
        borderColor: '#3b82f6',
        backgroundColor: 'rgba(59, 130, 246, 0.2)',
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
    },
  };

  return <Line data={chartData} options={options} />;
}

export default SalesChart;

Step 4: Adding Dynamic Filters

The useEffect in the SalesDashboard component binds the filters to the data fetch logic. When a user selects a new region or product, the filters state updates, triggering the API call to fetch filtered data.

This ensures that the chart updates dynamically whenever a filter changes.

Step 5: Deploying the Dashboard

Finally, deploy your project:

Push your code to GitHub.

Link the repository to Vercel (or any preferred platform).

Deploy and share the live link.

Bonus: How Ventivo Can Help

Manually creating interactive charts is a great learning exercise, but it can get time-consuming for larger projects. Tools like Ventivo streamline this process by letting you connect your data sources and create real-time visualizations without writing extensive code. Use Ventivo to enhance your dashboard-building workflow!

Conclusion

With React and Chart.js, building an interactive sales dashboard is straightforward. Whether you’re creating a custom solution or integrating with tools like Ventivo, the possibilities are endless. Try it out today and turn your data into actionable insights!