Pie Chart

Pie charts are circular graphs that are divided into slices to represents numeric percentages or proportions of a whole. The

Read more on: Pie chart.

Inputs

data

Type: object [] required

Data must be provided as an array of objects in JSON format. Each nested datum is indexed by an label and a pieValue property.

A sample dataset could look something like this:

fruits.json

[
{
"label" : "apples",
"value" : 20
},
{
"label" : "bananas",
"value" : 40
},
{
"label" : "pears",
"value" : 30
},
{
"label" : "papaya",
"value" : 50
},
{
"label" : "oranges",
"value" : 70
}
]

label

Type: string required

The label is the string which acts as an id accessor for a given dataset. This string must match the corresponding id for each datum.


pieValue

Type: string required

The value is the string which is the corresponding value accessor for a given dataset. This string must match the corresponding value for each datum.


innerRadius

Type: number

Inner radius in pixels. Set a value to create a doughnut chart. This value should not exceed the value of outerRadius—if so, this value will default back to 0.


outerRadius

Type: number

Outer radius in pixels, used within the bounding box of the Chart wrapper component. If a value > 100 is provided, this value will default back to 100.


Children

The PieChart contains the following children components:

  • Chart
  • Axis
  • Circles
🚨

🤖 boop boop boop ...
Currently, PieChart does not display when nested inside the parent Chart component. We are aware of and are actively working on this issue! In the meantime, PieChart may look slightly off-centered within the application.

Component Structure and Use

The finished MyPieChart is structured like so:

import { data } from 'MyPieChartData.js'
import { PieChart } from 'ad3lie'
const MyPieChart = ({ data /* see data from your Javascript data file */ }) => (
<PieChart
data={data}
innerRadius={0}
outerRadius={100}
label="label"
pieValue="value"
/>
)

Simply import your custom MyPieChart along with MyPieChartData.js for easy use. Or, pull PieChart and provide the required props yourself.

Props Summary

PropertyTypeRequired?
dataobject []✅
labelstring✅
pieValuestring✅
innerRadiusnumber❌
outerRadiusnumber❌