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

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#