---
title: PieChart
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/charts/PieChart
---
Creates a pie chart. Data can either be obtained by performing a NRQL query against a particular account, or it can be passed through the `data` prop.
The `data` format is a series of objects, each containing `metadata` and `data`. Each `data` contains both values from this point, and `x` and `y` keys used to plot the chart.
### Usage
```jsx
import { PieChart } from 'nr1'
```
### Examples
#### Basic
```jsx
```
#### With multiple accounts
```jsx
```
#### Fill container
```jsx
```
#### With custom data
```jsx
function render() {
const data = [
{
metadata: {
id: "series-1",
name: "Serie 1",
color: "#a35ebf",
viz: "main",
units_data: {
y: "BYTES",
},
},
data: [{ y: 128 }],
},
{
metadata: {
id: "series-2",
name: "Serie 2",
color: "#85c956",
viz: "main",
units_data: {
y: "BYTES",
},
},
data: [{ y: 256 }],
},
{
metadata: {
id: "series-3",
name: "Serie 3",
color: "#f86e40",
viz: "main",
units_data: {
y: "BYTES",
},
},
data: [{ y: 300 }],
},
{
metadata: {
id: "series-4",
name: "Serie 4",
color: "#c21684",
viz: "main",
units_data: {
y: "BYTES",
},
},
data: [{ y: 450 }],
},
{
metadata: {
id: "series-5",
name: "Serie 5",
color: "#51c9b7",
viz: "main",
units_data: {
y: "BYTES",
},
},
data: [{ y: 170 }],
},
{
metadata: {
id: "series-6",
name: "Serie 6",
color: "#48d2f0",
viz: "main",
units_data: {
y: "BYTES",
},
},
data: [{ y: 200 }],
},
];
return ;
}
```
### Props
| `accountId` DEPRECATED number | > #### ⚠️ DUE NOVEMBER 1ST, 2022 > > The `accountId` is deprecated, use `accountIds` instead Sets the account ID to perform the query. |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `accountIds` number\[] | Sets the account IDs to perform the query. |
| `className` string | Appends class names to the component. |
| `data` object\[] | Data is an array of objects where each object represents a series to be drawn. Each series comprises visualization metadata and an array of data points. ````js const data = [ { metadata: { id: 'series-1', name: 'Serie 1', color: '#a35ebf', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 128 }], }, { metadata: { id: 'series-2', name: 'Serie 2', color: '#85c956', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 256 }], }, { metadata: { id: 'series-3', name: 'Serie 3', color: '#f86e40', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 300 }], }, { metadata: { id: 'series-4', name: 'Serie 4', color: '#c21684', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 450 }], }, { metadata: { id: 'series-5', name: 'Serie 5', color: '#51c9b7', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 170 }], }, { metadata: { id: 'series-6', name: 'Serie 6', color: '#48d2f0', viz: 'main', units_data: { y: 'BYTES', }, }, data: [{ y: 200 }], }, ]; ``` ```` |
| `fullHeight` boolean | Expands the chart to occupy all available height. |
| `fullWidth` boolean | Expands the chart to occupy all available width. |
| `onClickPie` function | Adds a click listener that gets triggered when the user clicks over the corresponding pie. |
| `onHoverPie` function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding pie. |
| `query` string | NRQL query used for fetching data. The query is performed against the provided `accountIds`. |
| `style` object | Inline style for custom styling. |