DEV Community

Cover image for Data Visualization and Dropdowns made simple in Vite React: Chart.js, React-Chartjs-2, and React-Select
Lawani Elyon John
Lawani Elyon John

Posted on

Data Visualization and Dropdowns made simple in Vite React: Chart.js, React-Chartjs-2, and React-Select

#javascript #react #tutorial #programming

Introduction

When building dashboards or data-centric applications, visualizations and interactive elements like dropdowns play a significant role.
So In this tutorial, I’ll walk you through integrating Chart.js, React-Chartjs-2, and React-Select into a Vite React project.

Setting Up Your Vite React Project

Start by creating a new Vite React project. Run the following command:

npm create vite@latest cov-dashboard -- --template react
Enter fullscreen mode Exit fullscreen mode

Navigate into the project folder:

cd cov-dashboard
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Installing Chart.js, React-Chartjs-2, and React-Select

To include these libraries in your project, install them with:

npm install chart.js react-chartjs-2 react-select
Enter fullscreen mode Exit fullscreen mode

📝 Note: Ensure you use npm instead of yarn if you prefer a consistent package management approach.

Creating a Simple Bar Chart

Here’s how you can create a Bar Chart using react-chartjs-2:

Component: BarChart.jsx

import React from 'react'; import { Bar } from 'react-chartjs-2'; import Chart from 'chart.js/auto'; const data = { labels: ['Jan', 'Feb', 'Mar'], datasets: [ { label: 'Sales', data: [30, 50, 70], backgroundColor: ['rgba(75, 192, 192, 0.6)'], }, ], }; const BarChart = () => <Bar data={data} />; export default BarChart;
Enter fullscreen mode Exit fullscreen mode

Adding a Dynamic Dropdown

Let’s add a dropdown menu with react-select:

Component: Dropdown.jsx

import React from 'react'; import Select from 'react-select'; const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'vanilla', label: 'Vanilla' }, { value: 'strawberry', label: 'Strawberry' }, ]; const Dropdown = () => <Select options={options} />; export default Dropdown;
Enter fullscreen mode Exit fullscreen mode

Integrating the Components

Import and use the components in your main App.jsx:

Main App:

import React from 'react'; import BarChart from './BarChart'; import Dropdown from './Dropdown'; const App = () => ( <div> <h1>Dashboard</h1> <BarChart /> <Dropdown /> </div> ); export default App;
Enter fullscreen mode Exit fullscreen mode

Conclusion

With this simple minimal setup, you’ve learnt how to successfully add powerful tools for visualizations and interactive UI components in your Vite React project.

Top comments (0)