chartjs-integrationslisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Framework Integrations (v4.5.1)
Complete guide to integrating Chart.js with React, Vue, Angular, Rails 8, and other frameworks.
## React Integration (react-chartjs-2)
### Installation
```bash
npm install react-chartjs-2 chart.js
```
### Basic Usage
```jsx
import { Bar } from 'react-chartjs-2';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js';
// Register components
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
function BarChart() {
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
};
const options = {
responsive: true,
plugins: {
legend: { position: 'top' },
title: { display: true, text: 'Monthly Sales' }
}
};
return <Bar data={data} options={options} />;
}
```
### Available Components
```jsx
import {
Bar,
Line,
Pie,
Doughnut,
Radar,
PolarArea,
Bubble,
Scatter
} from 'react-chartjs-2';
```
### Chart Reference
```jsx
import { useRef } from 'react';
import { Bar, getElementAtEvent } from 'react-chartjs-2';
function InteractiveChart() {
const chartRef = useRef();
const handleClick = (event) => {
const element = getElementAtEvent(chartRef.current, event);
if (element.length > 0) {
const { datasetIndex, index } = element[0];