📄 primeng/chart

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

Source: https://primeng.org/chart

PassThrough Attributes just landed ✅Learn More

  • SearchK

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

Charts

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

Import #

import { ChartModule } from 'primeng/chart';

Chart.js #

To begin with, first you must install the charts.js package using npm and then include it in your project. An example with CLI would be;

npm install chart.js --save

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.

<p-chart type="bar" [data]="basicData" [options]="basicOptions" />

Pie #

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

<p-chart type="pie" [data]="data" [options]="options" class="w-full md:w-[30rem]" />

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.

<p-chart type="doughnut" [data]="data" [options]="options" class="w-full md:w-[30rem]" />

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.

<p-chart type="bar" [data]="data" [options]="options" class="h-[30rem]" />

Horizontal Bar #

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

<p-chart type="bar" [data]="data" [options]="options" class="h-[30rem]" />

Stacked Bar #

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

<p-chart type="bar" [data]="data" [options]="options" class="h-[30rem]" />

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.

<p-chart type="line" [data]="data" [options]="options" class="h-[30rem]" />

MultiAxis #

Multiple axes can be added using the scales option.

<p-chart type="line" [data]="data" [options]="options" class="h-[30rem]" />

Line Styles #

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

<p-chart type="line" [data]="data" [options]="options" class="h-[30rem]" />

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.

<p-chart type="polarArea" [data]="data" [options]="options" class="w-full md:w-[30rem]" />

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.

<p-chart type="radar" [data]="data" [options]="options" class="w-full md:w-[30rem]" />

Combo #

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

<p-chart type="line" [data]="data" [options]="options" class="h-[30rem]" />

Accessibility #

Screen Reader

Chart components internally use canvas element, refer to the Chart.js accessibility guide for more information.

<p-chart type="line" [data]="data" ariaLabel="Data" />

  • Import

  • Chart.js

  • Basic

  • Pie

  • Doughnut

  • Vertical Bar

  • Horizontal Bar

  • Stacked Bar

  • Line

  • MultiAxis

  • Line Styles

  • Polar Area

  • Radar

  • Combo

  • Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

Learn More

PrimeNG 20.3.0 by PrimeTek