Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
Give us a star ⭐️ on Github.

React Chart.js Component

React wrapper for Chart.js 3.0, the most popular charting library.

Installation#

If you want to use our Chart.js React wrapper you have to install an additional package.

Npm#

1npm install @coreui/react-chartjs

Yarn#

1yarn add @coreui/react-chartjs

Chart Types#

Line Chart#

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. Line Chart properties

1<CChart
2  type="line" 
3  data={{
4    labels: ["January", "February", "March", "April", "May", "June", "July"],
5    datasets: [
6      {
7        label: "My First dataset",
8        backgroundColor: "rgba(220, 220, 220, 0.2)",
9        borderColor: "rgba(220, 220, 220, 1)",
10        pointBackgroundColor: "rgba(220, 220, 220, 1)",
11        pointBorderColor: "#fff",
12        data: [40, 20, 12, 39, 10, 40, 39, 80, 40]
13      },
14      {
15        label: "My Second dataset",
16        backgroundColor: "rgba(151, 187, 205, 0.2)",
17        borderColor: "rgba(151, 187, 205, 1)",
18        pointBackgroundColor: "rgba(151, 187, 205, 1)",
19        pointBorderColor: "#fff",
20        data: [50, 12, 28, 29, 7, 25, 12, 70, 60]
21      },
22    ],
23  }}
24/>

Bar Chart#

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. Bar Chart properties

1<CChart
2  type="bar"
3  data={{
4    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
5    datasets: [
6      {
7        label: 'GitHub Commits',
8        backgroundColor: '#f87979',
9        data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
10      },
11    ],
12  }}
13  labels="months"
14/>

Radar Chart#

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. Radar Chart properties

1<CChart 
2  type="radar"
3  data={{
4    labels: [
5      'Eating',
6      'Drinking',
7      'Sleeping',
8      'Designing',
9      'Coding',
10      'Cycling',
11      'Running',
12    ],
13    datasets: [
14      {
15        label: 'My First dataset',
16        backgroundColor: 'rgba(220, 220, 220, 0.2)',
17        borderColor: 'rgba(220, 220, 220, 1)',
18        pointBackgroundColor: 'rgba(220, 220, 220, 1)',
19        pointBorderColor: '#fff',
20        pointHighlightFill: '#fff',
21        pointHighlightStroke: 'rgba(220, 220, 220, 1)',
22        data: [65, 59, 90, 81, 56, 55, 40],
23      },
24      {
25        label: 'My Second dataset',
26        backgroundColor: 'rgba(151, 187, 205, 0.2)',
27        borderColor: 'rgba(151, 187, 205, 1)',
28        pointBackgroundColor: 'rgba(151, 187, 205, 1)',
29        pointBorderColor: '#fff',
30        pointHighlightFill: '#fff',
31        pointHighlightStroke: 'rgba(151, 187, 205, 1)',
32        data: [28, 48, 40, 19, 96, 27, 100],
33      },
34    ],
35  }}
36/>

Doughnut and Pie Charts#

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. Doughnut and Pie Charts properties

1<CChart
2  type="doughnut"
3  data={{
4    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
5    datasets: [
6      {
7        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
8        data: [40, 20, 80, 10],
9      },
10    ],
11  }}
12/>

Polar Area Chart#

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. Polar Area Chart properties

1<CChart
2  type="polarArea"
3  data={{
4    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
5    datasets: [
6      {
7        data: [11, 16, 7, 3, 14],
8        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
9      },
10    ],
11  }}
12/>

Bubble Chart#

A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. Bubble Chart properties

1<CChart
2  type="bubble"
3  data={{
4    datasets: [{
5      label: 'First Dataset',
6      data: [{
7        x: 20,
8        y: 30,
9        r: 15
10      }, {
11        x: 40,
12        y: 10,
13        r: 10
14      }],
15      backgroundColor: 'rgb(255, 99, 132)'
16    }]
17  }}
18/>

Scatter Chart#

1<CChart
2  type="scatter"
3  data={{
4    datasets: [{
5      label: 'Scatter Dataset',
6      data: [{
7        x: -10,
8        y: 0
9      }, {
10        x: 0,
11        y: 10
12      }, {
13        x: 10,
14        y: 5
15      }, {
16        x: 0.5,
17        y: 5.5
18      }],
19      backgroundColor: 'rgb(255, 99, 132)'
20    }],
21  }}
22  options={{
23    scales: {
24      x: {
25        type: 'linear',
26        position: 'bottom'
27      }
28    }
29  }}
30/>

API#

CChart#

1import { CChart } from '@coreui/react-chartjs'
2// or
3import CChart from '@coreui/react-chartjs/src/CChart'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
customTooltips	Enables custom html based tooltips instead of standard tooltips.	`boolean`	true
data	The data object that is passed into the Chart.js chart (more info).	`ChartData<keyof ChartTypeRegistry, (number` \| `ScatterDataPoint` \| `BubbleDataPoint)[], unknown>` \| `((canvas: HTMLCanvasElement) => ChartData<...>)`	-
fallbackContent	A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.	`React.ReactNode`	-
getDatasetAtEvent	Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.	`(dataset: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void`	-
getElementAtEvent	Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.	`(element: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void`	-
getElementsAtEvent	Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.	`(elements: InteractionItem[], event: React.MouseEvent<HTMLCanvasElement>) => void`	-
height	Height attribute applied to the rendered canvas.	`number`	150
id	ID attribute applied to the rendered canvas.	`string`	-
options	The options object that is passed into the Chart.js chart.	`_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>`	-
plugins	The plugins array that is passed into the Chart.js chart (more info)	`Plugin<keyof ChartTypeRegistry, AnyObject>[]`	[]
redraw	If true, will tear down and redraw chart on all updates.	`boolean`	false
type	Chart.js chart type.	`{'line'` \| `'bar'` \| `'radar'` \| `'doughnut'` \| `'polarArea'` \| `'bubble'` \| `'pie'` \| `'scatter'}`	bar
width	Width attribute applied to the rendered canvas.	`number`	300
wrapper	Put the chart into the wrapper div element.	`boolean`	true

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.