How to create charts in React with Chart.js
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Chart.js provides powerful data visualization capabilities in React applications, creating responsive and interactive charts for dashboards, analytics, and reporting. As the creator of CoreUI, a widely used open-source UI library, I’ve integrated Chart.js in admin dashboards throughout my 11 years of React development. The most straightforward approach is using the react-chartjs-2 library, which provides React components wrapping Chart.js functionality. This method offers declarative chart creation with full Chart.js features and automatic updates on data changes.
Install react-chartjs-2 and chart.js, then use chart components with data and options props.
import { Line } from 'react-chartjs-2'
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from 'chart.js'
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
)
const SalesChart = () => {
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'Sales 2025',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)'
}
]
}
const options = {
responsive: true,
plugins: {
legend: {
position: 'top'
},
title: {
display: true,
text: 'Monthly Sales'
}
}
}
return <Line data={data} options={options} />
}
Here ChartJS.register imports and registers necessary Chart.js components for line charts. The data object defines chart labels and datasets with styling properties like borderColor and backgroundColor. The options object configures chart behavior, enabling responsive sizing and customizing legend and title display. The Line component renders the chart, automatically updating when data or options change through React’s reactivity system.
Best Practice Note:
This is the charting solution we use in CoreUI admin templates for dashboard analytics and reporting features. Register only the Chart.js components you need to reduce bundle size, memoize chart data and options with useMemo to prevent unnecessary re-renders, and consider using CoreUI’s pre-built chart components for consistent styling across your application.
