📄 primereact/chart

File: chart.md | Updated: 11/15/2025

Source: https://primereact.org/chart/

Introducing PrimeReact v11 Alpha 🥁Learn More

Chart

Chart components are based on Chart.js, an open source HTML5 based charting library.

Import#

import { Chart } from 'primereact/chart';

Copy

Chart.js#

Chart component uses Chart.JS underneath so it needs to be installed as a dependency.

npm install chart.js

Copy

Basic#

A chart is configured with 3 properties; type, data and options. Chart type is defined using the type property that accepts pie, doughtnut, line, bar, radar and polarArea as a value. The data defines datasets represented with the chart and the options provide numerous customization options to customize the presentation.

<Chart type="bar" data={chartData} options={chartOptions} />

Copy

Pie#

A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

<Chart type="pie" data={chartData} options={chartOptions} className="w-full md:w-30rem" />

Copy

Doughnut#

A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.

<Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />

Copy

Vertical Bar#

A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.

<Chart type="bar" data={chartData} options={chartOptions} />

Copy

Horizontal Bar#

A bar chart is rendered horizontally when indexAxis option is set as y.

<Chart type="bar" data={chartData} options={chartOptions} />

Copy

Stacked Bar#

Bars can be stacked on top of each other when stacked option of a scale is enabled.

<Chart type="bar" data={chartData} options={chartOptions} />

Copy

Line#

A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.

<Chart type="line" data={chartData} options={chartOptions} />

Copy

Multi Axis#

Multiple axes can be added using the scales option.

<Chart type="line" data={chartData} options={chartOptions} />

Copy

Line Styles#

Various styles of a line series can be customized to display customizations like an area chart.

<Chart type="line" data={chartData} options={chartOptions} />

Copy

Polar Area#

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.

<Chart type="polarArea" data={chartData} options={chartOptions} className="w-full md:w-30rem" />

Copy

Radar#

A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

<Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />

Copy

Combo#

Different chart types can be combined in the same graph using the type option of a dataset.

<Chart type="line" data={chartData} options={chartOptions} />

Copy

Accessibility#

Screen Reader

Chart components internally use canvas element, refer to the Chart.js accessibility guide for more information. The canvas element can be customized with pt property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to provide fallback content like a table.

<Chart type="line" data={data} pt={canvas: {'role': 'img', 'aria-label': 'Data'}}} />

<Chart type="line" data={data}>
    <DataTable />
</Chart>

Copy

  • Import

  • Chart.js

  • Basic

  • Pie

  • Doughnut

  • Vertical Bar

  • Horizontal Bar

  • Stacked Bar

  • Line

  • Multi Axis

  • Line Styles

  • Polar Area

  • Radar

  • Combo

  • Accessibility

PrimeReact 10.9.7 by PrimeTek