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
Property | Type | Required? |
---|---|---|
data | object [] | ✅ |
label | string | ✅ |
pieValue | string | ✅ |
innerRadius | number | ❌ |
outerRadius | number | ❌ |