### Install Project Dependencies

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/README.md

Installs all necessary project dependencies using pnpm. Run this command after cloning the repository.

```bash
pnpm install
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/index.mdx

Install chart.js and react-chartjs-2 using Yarn.

```bash
yarn add chart.js react-chartjs-2
```

--------------------------------

### Install Dependencies with PNPM

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/index.mdx

Install chart.js and react-chartjs-2 using PNPM.

```bash
pnpm add chart.js react-chartjs-2
```

--------------------------------

### Install Dependencies with NPM

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/index.mdx

Install chart.js and react-chartjs-2 using NPM.

```bash
npm install --save chart.js react-chartjs-2
```

--------------------------------

### Start Local Development Server

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/README.md

Starts a local development server that automatically refreshes on code changes. Opens the website in your default browser.

```bash
pnpm start
```

--------------------------------

### Install react-chartjs-2 and chart.js

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/README.md

Install the library and its peer dependency chart.js using your preferred package manager. It is recommended to use chart.js version 4.0.0 or higher.

```bash
pnpm add react-chartjs-2 chart.js
```

```bash
yarn add react-chartjs-2 chart.js
```

```bash
npm i react-chartjs-2 chart.js
```

--------------------------------

### Basic Radar Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/radar.mdx

Import and render the Radar component with necessary options and data. Ensure you have chart.js and react-chartjs-2 installed.

```jsx
import { Radar } from 'react-chartjs-2';

<Radar
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### getDatasetAtEvent

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-events.md

Gets dataset from mouse click event.

```APIDOC
## getDatasetAtEvent

### Description
Gets dataset from mouse click event.

### Usage
```jsx
import { useRef } from 'react';
import { Bar, getDatasetAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getDatasetAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}
```
```

--------------------------------

### PolarArea Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/polar-area.mdx

Basic usage example of the PolarArea component. It accepts `options` and `data` props for chart configuration and data, along with any standard HTML canvas props.

```APIDOC
## PolarArea Component Usage

### Description
This component renders a polar area chart. It requires `data` and `options` props to define the chart's appearance and behavior. It also accepts standard HTML canvas attributes.

### Usage Example

```jsx
import { PolarArea } from 'react-chartjs-2';

<PolarArea
  options={...} // Chart.js options object
  data={...}    // Chart.js data object
  {...props}    // Other standard canvas props
/>
```

### Props

- **options** (object) - Configuration options for the chart.
- **data** (object) - The data to be displayed in the chart.
- **{...props}** - Supports all standard `<canvas>` HTML attributes.
```

--------------------------------

### getElementsAtEvent

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-events.md

Gets all dataset elements from mouse click event.

```APIDOC
## getElementsAtEvent

### Description
Gets all dataset elements from mouse click event.

### Usage
```jsx
import { useRef } from 'react';
import { Bar, getElementsAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getElementsAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}
```
```

--------------------------------

### Import and Use Doughnut Chart Component

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/README.md

Import the Doughnut component from react-chartjs-2 and use it by passing the 'data' prop. This is a basic setup for rendering a chart.

```jsx
import { Doughnut } from 'react-chartjs-2';

<Doughnut data={...} />
```

--------------------------------

### Get Dataset at Event

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-events.md

Use getDatasetAtEvent to retrieve dataset information from a click event. Requires chart ref and event object.

```jsx
import { useRef } from 'react';
import { Bar, getDatasetAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getDatasetAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}
```

--------------------------------

### Get Single Element at Event

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-events.md

Use getElementAtEvent to get a single dataset element from a click event. Requires chart ref and event object.

```jsx
import { useRef } from 'react';
import { Bar, getElementAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getElementAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}
```

--------------------------------

### getElementAtEvent

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-events.md

Gets single dataset element from mouse click event.

```APIDOC
## getElementAtEvent

### Description
Gets single dataset element from mouse click event.

### Usage
```jsx
import { useRef } from 'react';
import { Bar, getElementAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getElementAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}
```
```

--------------------------------

### Get All Elements at Event

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-events.md

Use getElementsAtEvent to retrieve all dataset elements associated with a click event. Requires chart ref and event object.

```jsx
import { useRef } from 'react';
import { Bar, getElementsAtEvent } from 'react-chartjs-2';

function App() {
  const chartRef = useRef();
  const onClick = (event) => {
    console.log(getElementsAtEvent(chartRef.current, event));
  }

  return (
    <Bar
      ref={chartRef}
      data={data}
      onClick={onClick}
    />
  );
}
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/README.md

Builds the website and deploys it to the 'gh-pages' branch, suitable for hosting on GitHub Pages. Ensure you set the GIT_USER environment variable.

```bash
GIT_USER=<Your GitHub username> USE_SSH=true pnpm deploy
```

--------------------------------

### Basic Pie Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/pie.mdx

Demonstrates the basic import and usage of the Pie component. Ensure you provide 'options' and 'data' props for rendering.

```jsx
import { Pie } from 'react-chartjs-2';

<Pie
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Build Static Website Content

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/README.md

Generates the static files for the website, typically placed in the 'build' directory. These files can be hosted on any static content service.

```bash
pnpm build
```

--------------------------------

### Chart Component Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/chart.mdx

Basic usage of the Chart component, demonstrating how to import and render it with essential props like type, options, and data.

```APIDOC
## Chart Component Usage

### Description

This section shows the basic structure for using the `Chart` component from the `react-chartjs-2` library. It highlights the necessary imports and the core props required for rendering a chart.

### Props

- **type** (string) - Required - The type of chart to render (e.g., 'bar', 'line', 'pie').
- **options** (object) - Required - Configuration object for chart options (e.g., title, legend, tooltips).
- **data** (object) - Required - The data to be displayed in the chart, including labels and datasets.

### Example

```jsx
import { Chart } from 'react-chartjs-2';

<Chart
  type='bar' // Example: 'bar' chart
  options={{
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }}
  data={{
    labels: ['January', 'February', 'March'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  }}
/>
```

### Additional Props

The `Chart` component also accepts all standard HTML `<canvas>` element props.
```

--------------------------------

### Basic Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/chart.mdx

Import and render the Chart component with essential props like type, options, and data. This is the fundamental way to display a chart.

```jsx
import { Chart } from 'react-chartjs-2';

<Chart
  type={...}
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Basic Line Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/line.mdx

Import and render the Line component with options and data. This is the fundamental way to display a line chart.

```jsx
import { Line } from 'react-chartjs-2';

<Line
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Basic Bar Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/bar.mdx

Import and render the Bar component with options and data. Ensure you have the necessary Chart.js and react-chartjs-2 imports.

```jsx
import { Bar } from 'react-chartjs-2';

<Bar
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Radar Component Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/radar.mdx

This snippet shows the basic usage of the Radar component, including importing it and passing essential props like data and options.

```APIDOC
## Radar Component

### Description

The Radar component is used to render radar charts. It accepts `data` and `options` props for chart configuration, along with any standard `<canvas>` element props.

### Usage

```jsx
import { Radar } from 'react-chartjs-2';

<Radar
  options={...}
  data={...}
  {...props}
/>
```

### Props

- **data** (object) - Required - The data to be displayed on the chart.
- **options** (object) - Optional - Configuration options for the chart.
- **{...props}** - Supports all standard `<canvas>` element props.
```

--------------------------------

### Basic Scatter Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/scatter.mdx

Import and render the Scatter component with required options and data. This is the fundamental way to display a scatter plot.

```jsx
import { Scatter } from 'react-chartjs-2';

<Scatter
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Basic Doughnut Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/doughnut.mdx

Import and render the Doughnut component. Pass options and data as props. Supports standard canvas props.

```jsx
import { Doughnut } from 'react-chartjs-2';

<Doughnut
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Bar Component Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/bar.mdx

This snippet shows the basic import and usage of the Bar component. You can pass `options` and `data` props to configure your chart, along with any other standard HTML canvas props.

```APIDOC
## Bar Component

### Description

The Bar component is used to render bar charts. It accepts `options` and `data` props to define the chart's appearance and data, and also supports all standard `<canvas>` props.

### Usage

```jsx
import { Bar } from 'react-chartjs-2';

<Bar
  options={...}
  data={...}
  {...props}
/>
```

### Props

- **options** (object) - Configuration options for the chart.
- **data** (object) - The data to be displayed in the chart.
- **{...props}** (any) - Supports all standard `<canvas>` props.
```

--------------------------------

### Scatter Component Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/scatter.mdx

This snippet shows the basic import and usage of the Scatter component. You can pass `options` and `data` props to configure your scatter plot, along with any other standard HTML canvas props.

```APIDOC
## Scatter Component

### Description

The Scatter component is used to render scatter plots.

### Usage

```jsx
import { Scatter } from 'react-chartjs-2';

<Scatter
  options={...}
  data={...}
  {...props}
/>
```

### Props

In addition to the props listed below, the Scatter component also supports all standard `<canvas>` props.

* **options** (object) - Configuration options for the chart.
* **data** (object) - The data to be displayed in the chart.
* **{...props}** - Any other valid HTML canvas attributes.
```

--------------------------------

### Basic Bubble Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/bubble.mdx

Import and render the Bubble component with options and data. Supports additional props passed directly to the canvas element.

```jsx
import { Bubble } from 'react-chartjs-2';

<Bubble
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Basic Doughnut Chart Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/index.mdx

Import necessary Chart.js components and the Doughnut component from react-chartjs-2. Register the required elements and then use the Doughnut component with your data.

```jsx
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

<Doughnut data={...} />
```

--------------------------------

### Register Filler Component for Background Fills

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/fill-property.md

To enable background filling, you must import and register the Filler component from 'chart.js'. This is necessary because Chart.js v4 is tree-shakable.

```javascript
import { Filler } from "chart.js";

ChartJS.register(Filler);
```

--------------------------------

### Import Chart.js Types for TypeScript

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/typescript.md

Import necessary types like ChartData and ChartOptions from 'chart.js' to enable type checking for your chart configurations.

```typescript
import type { ChartData, ChartOptions } from 'chart.js';
```

--------------------------------

### Specify datasetIdKey for Unique Datasets

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/working-with-datasets.md

Use the `datasetIdKey` prop to provide a unique identifier for each dataset, preventing them from merging during re-renders. Ensure each dataset object has a corresponding `id` property.

```tsx
import { Line } from 'react-chartjs-2';

<Line
  datasetIdKey='id'
  data={{
    labels: ['Jun', 'Jul', 'Aug'],
    datasets: [
      {
        id: 1,
        label: '',
        data: [5, 6, 7],
      },
      {
        id: 2,
        label: '',
        data: [3, 2, 1],
      },
    ],
  }}
/>
```

--------------------------------

### PolarArea Component Usage

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/components/polar-area.mdx

Import and render the PolarArea component. Pass your chart data and options as props. It also accepts any standard HTML canvas element props.

```jsx
import { PolarArea } from 'react-chartjs-2';

<PolarArea
  options={...}
  data={...}
  {...props}
/>
```

--------------------------------

### Define TypeScript Interface for Chart Props

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/typescript.md

Create an interface to strongly type the 'options' and 'data' props for your chart components, specifying the chart type using generics.

```typescript
interface LineProps {
  options: ChartOptions<'line'>;
  data: ChartData<'line'>;
}
```

--------------------------------

### Registering ArcElement for Chart.js

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/registered-element.md

Import and register the `ArcElement` component when encountering an "arc" is not a registered element error. This is necessary for Chart.js v4 and v3 due to tree-shaking.

```javascript
import { ArcElement } from "chart.js";

ChartJS.register(ArcElement);
```

--------------------------------

### Enable ESM in package.json

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/migration-to-v5.md

To use ESM-only packages like Chart.js v4 and react-chartjs-2 v5, set the 'type' field to 'module' in your package.json.

```json
{
  "type": "module"
}
```

--------------------------------

### Access Chart.js Instance with useRef

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/chartjs-instance.md

Use the `useRef` hook to create a mutable reference and attach it to the Chart component. Access the Chart.js instance within the `useEffect` hook after the component has mounted.

```tsx
function App() {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = chartRef.current;

    if (chart) {
      console.log('ChartJS', chart);
    }
  }, []);

  return <Chart ref={chartRef} type='line' data={chartData} />;
}
```

--------------------------------

### Register CategoryScale in Chart.js

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/registered-scale.md

Import and register the CategoryScale when encountering an 'Uncaught Error: "category" is not a registered scale.' error. This ensures the category scale is available for use in your charts.

```javascript
import { CategoryScale, Chart } from "chart.js";

Chart.register(CategoryScale);
```

--------------------------------

### Accessing Canvas Context in React

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/canvas-context.md

Use a ref to access the chart's canvas element and its 2D rendering context. This is useful for drawing custom elements or performing direct canvas manipulations.

```tsx
function App() {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = chartRef.current;

    if (chart) {
      console.log('CanvasRenderingContext2D', chart.ctx);
      console.log('HTMLCanvasElement', chart.canvas);
    }
  }, []);

  return <Chart ref={chartRef} type='line' data={chartData} />;
}
```

--------------------------------

### Disable Aspect Ratio Maintenance in Chart.js

Source: https://github.com/reactchartjs/react-chartjs-2/blob/master/website/docs/faq/maintain-aspect-ratio.md

Set `maintainAspectRatio` to `false` within the chart options to allow the chart to adopt the specified `width` and `height`.

```tsx
<Bar
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.