Charts

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

Import via Module


import { Chart } from 'primereact/chart';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/chart/chart.min.js"></script>

Getting Started

Chart component is a wrapper around on Chart.js 3.3.2+ so chart.js needs to be included in your project. For a complete documentation and samples please refer to the chart.js website.


npm install chart.js

Chart Types

Chart type is defined using the type property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".

Data

Data of a chart is provided using a binding to the data property, each type has its own format of data. Here is an example of a line chart.


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


const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
        {
            label: 'First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: '#4bc0c0'
        },
        {
            label: 'Second Dataset',
            data: [28, 48, 40, 19, 86, 27, 90],
            fill: false,
            borderColor: '#565656'
        }
    ]
};

Options

While a series can be customized per dataset, general chart options are defined with options property. Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.


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


const options = {
    plugins: {
        title: {
            display: true,
            text: 'My Title',
            font: {
                size: 16
            }
        },
        legend: {
            position: 'bottom'
        }
    };
}

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
type	string	null	Type of the chart.
data	any	null	Data to display.
options	object	null	Options to customize the chart.
plugins	any[]	null	Used to custom plugins of the chart.
width	string	null	Width of the chart in non-responsive mode.
height	string	null	Height of the chart in non-responsive mode.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.