React Charts.js docs

Charts

Customizable responsive charts, including: Line, Bar, Pie charts and more.

React components for Chart.js, the most popular charting library.

To get started import and register main plugin elements along with individual components (chart types). Here is Line chart example:

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from 'react-chartjs-2'

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
Useful links

Line chart

'use client'

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js'
import { Line } from 'react-chartjs-2'

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)

export default function LineChartDemo() {
  return (
    <Line
      data={{
        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9'],
        datasets: [
          {
            label: 'Dataset 1',
            data: [12, 9, 7, 8, 6, 4, 3, 2, 0],
            backgroundColor: 'rgba(245,82,102,.35)',
            borderWidth: 2,
            borderColor: '#f55266',
            pointBackgroundColor: '#f55266',
            pointBorderWidth: 8,
            pointBorderColor: 'rgba(245,82,102,.35)',
            pointHoverBorderColor: '#f55266',
            pointHoverBorderWidth: 6,
          },
          {
            label: 'Dataset 2',
            data: [2, 1, 3, 7, 9, 6, 7.7, 4, 7],
            backgroundColor: 'rgba(51,179,107,.35)',
            borderWidth: 2,
            borderColor: '#33b36b',
            pointBackgroundColor: '#33b36b',
            pointBorderWidth: 8,
            pointBorderColor: 'rgba(51,179,107,.35)',
            pointHoverBorderColor: '#33b36b',
            pointHoverBorderWidth: 6,
          },
          {
            label: 'Dataset 3',
            data: [1, 3, 4, 5, 6, 8, 9, 10, 11],
            backgroundColor: 'rgba(47,110,213,.35)',
            borderWidth: 2,
            borderColor: '#2f6ed5',
            pointBackgroundColor: '#2f6ed5',
            pointBorderWidth: 8,
            pointBorderColor: 'rgba(47,110,213,.35)',
            pointHoverBorderColor: '#2f6ed5',
            pointHoverBorderWidth: 6,
          },
        ],
      }}
      options={{
        scales: {
          y: {
            beginAtZero: true,
            border: {
              color: 'rgba(133,140,151,.18)',
            },
            grid: {
              color: 'rgba(133,140,151,.18)',
            },
          },
          x: {
            border: {
              color: 'rgba(133,140,151,.18)',
            },
            grid: {
              color: 'rgba(133,140,151,.18)',
            },
          },
        },
      }}
    />
  )
}

Bar chart

'use client'

import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'
import { Bar } from 'react-chartjs-2'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

export default function BarChartDemo() {
  return (
    <Bar
      data={{
        labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
        datasets: [
          {
            label: 'Dataset 1',
            data: [12000, 9000, 7000, 8000, 11000, 6000],
            borderWidth: 2,
            borderColor: '#2f6ed5',
            backgroundColor: 'rgba(47,110,213,.35)',
            hoverBackgroundColor: 'rgba(47,110,213,.75)',
          },
          {
            label: 'Dataset 2',
            data: [3500, 5000, 8750, 1300, 3000, 8750],
            borderWidth: 2,
            borderColor: '#fc9231',
            backgroundColor: 'rgba(252,146,49,.35)',
            hoverBackgroundColor: 'rgba(252,146,49,.75)',
          },
        ],
      }}
      options={{
        scales: {
          y: {
            beginAtZero: true,
            border: {
              color: 'rgba(133,140,151,.18)',
            },
            grid: {
              color: 'rgba(133,140,151,.18)',
            },
          },
          x: {
            border: {
              color: 'rgba(133,140,151,.18)',
            },
            grid: {
              color: 'rgba(133,140,151,.18)',
            },
          },
        },
      }}
    />
  )
}

Pie chart

'use client'

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'react-chartjs-2'

ChartJS.register(ArcElement, Tooltip, Legend)

export default function PieChartDemo() {
  return (
    <Pie
      data={{
        labels: ['Dataset 1', 'Dataset 2', 'Dataset 3'],
        datasets: [
          {
            label: 'Value, %',
            data: [42, 25, 33],
            borderWidth: 0,
            backgroundColor: ['#f55266', '#33b36b', '#2f6ed5'],
            hoverBackgroundColor: ['#f55266', '#33b36b', '#2f6ed5'],
          },
        ],
      }}
      options={{
        plugins: {
          legend: {
            position: 'right',
            labels: {
              usePointStyle: true,
              boxWidth: 12,
              boxHeight: 12,
              useBorderRadius: true,
              borderRadius: 8,
              padding: 20,
              font: {
                size: 15,
              },
            },
          },
        },
      }}
    />
  )
}

Doughnut chart

'use client'

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Doughnut } from 'react-chartjs-2'

ChartJS.register(ArcElement, Tooltip, Legend)

export default function DoughnutChartDemo() {
  return (
    <Doughnut
      data={{
        labels: ['Dataset 1', 'Dataset 2', 'Dataset 3'],
        datasets: [
          {
            label: 'Value, %',
            data: [42, 25, 33],
            borderWidth: 0,
            backgroundColor: ['#f55266', '#33b36b', '#2f6ed5'],
            hoverBackgroundColor: ['#f55266', '#33b36b', '#2f6ed5'],
          },
        ],
      }}
      options={{
        plugins: {
          legend: {
            position: 'right',
            labels: {
              usePointStyle: true,
              boxWidth: 12,
              boxHeight: 12,
              useBorderRadius: true,
              borderRadius: 8,
              padding: 20,
              font: {
                size: 15,
              },
            },
          },
        },
      }}
    />
  )
}

Polar area chart

'use client'

import { Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend } from 'chart.js'
import { PolarArea } from 'react-chartjs-2'

ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend)

export default function PolarAreaChartDemo() {
  return (
    <PolarArea
      data={{
        labels: ['Red', 'Green', 'Orange', 'Grey', 'Blue'],
        datasets: [
          {
            label: 'My dataset',
            data: [11, 16, 7, 3, 14],
            borderWidth: 0,
            backgroundColor: ['#f55266', '#33b36b', '#fc9231', '#cad0d9', '#2f6ed5'],
            hoverBackgroundColor: ['#f55266', '#33b36b', '#fc9231', '#cad0d9', '#2f6ed5'],
          },
        ],
      }}
      options={{
        scales: {
          r: {
            ticks: {
              backdropColor: 'rgba(255,255,255,0)',
            },
            grid: {
              color: 'rgba(133,140,151,.18)',
            },
          },
        },
      }}
    />
  )
}

Radar chart

'use client'

import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from 'chart.js'
import { Radar } from 'react-chartjs-2'

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend)

export default function RadarChartDemo() {
  return (
    <Radar
      data={{
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
        datasets: [
          {
            label: 'Dataset 1',
            data: [65, 59, 90, 81, 56, 55, 40],
            fill: true,
            backgroundColor: 'rgba(245,82,102, .15)',
            borderColor: '#f55266',
            pointBackgroundColor: '#f55266',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: '#f55266',
          },
          {
            label: 'Dataset 2',
            data: [28, 48, 40, 19, 96, 27, 100],
            fill: true,
            backgroundColor: 'rgba(47,110,213, .15)',
            borderColor: '#2f6ed5',
            pointBackgroundColor: '#2f6ed5',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: '#2f6ed5',
          },
        ],
      }}
      options={{
        elements: {
          line: {
            borderWidth: 3,
          },
        },
        scales: {
          r: {
            ticks: {
              backdropColor: 'rgba(255,255,255,0)',
            },
            grid: {
              color: 'rgba(133,140,151,.18)',
            },
          },
        },
      }}
    />
  )
}
Top