CodeCraft Kit

@codecraftkit

Documentation

Pie Chart

Description#

A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.

This component is based on AmCharts v4

Usage#

Dummy Data#

Code Example

const data = [{
"category": "Lithuania",
"value": 501.9
}, {
"category": "Czech Republic",
"value": 301.9
}, {
"category": "Ireland",
"value": 201.1
}, {
"category": "Germany",
"value": 165.8
}, {
"category": "Australia",
"value": 139.9
}, {
"category": "Austria",
"value": 128.3
}, {
"category": "UK",
"value": 99
}, {
"category": "Belgium",
"value": 60
}, {
"category": "Netherlands",
"value": 50
}];

Simple Example#

Code Example

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

Note: Same as XYChart, The Pie chart will take category and values in the data by default... to customize this see the next example.

Custom Options to PieChart#

Code Example

<Chart data={data} type="PieChart" options={optionsExample}/>

The Options prop is an object that allows to customize the chart

To customize the PieChart you have to pass a object inside options called pieChart and inside it all the options you want to modify

For example lets see this data

Code Example

[{
"country": "Lithuania",
"litres": 50
}, {
"country": "Czech Republic",
"litres":20
}, {
"country": "Ireland",
"litres": 30
}, {
"country": "Germany",
"litres": 90
}, {
"country": "Australia",
"litres": 75
}, {
"country": "Austria",
"litres": 64.2
}, {
"country": "UK",
"litres": 105.9
}, {
"country": "Belgium",
"litres": 20
}, {
"country": "Netherlands",
"litres": 25
}];

If we use this data like this, the Chart won't do anything because there aren't any value or category field, so we need to tell the chart to get the params country and litres from the data using options like this:

Code Example

const optionsExample = {
//PieChart Options
pieChart: {
    //activate legend
    legend: true,
    //To modify the size of the inner circle
    radiusInside: 50,
    series: {
        category: 'country',
        value: 'litres',
        //Pie Chart Title
        name: 'Countries Water',
    },
}
};

Note: We also make bigger the inner circle and activate the legend.

Customize color#

To change the color of each item you have to put in the data a field called color, like this:

Code Example

const optionsColorData = [{
"country": "Lithuania",
"litres": 501,
"color": am4core.color("#ED1C24")
}, {
"country": "Czechia",
"litres": 301,
"color": am4core.color("#235789")
}, {
"country": "Ireland",
"litres": 201,
"color": am4core.color("#F1D302")
}, {
"country": "Germany",
"litres": 165,
"color": am4core.color("#020100")
}];

Note: You don't have to change options to use the color from the data

To use am4core you have to import it, like this:

Pie Chart 3d#

To change the PieChart to a 3d one you have to tell it in the props like this:

Code Example

const options3dExample = {
    //PieChart Options
    pieChart: {
        //To activate the 3d chart
        type:'PieChart3D',
        //activate legend
        legend: true,
        //To modify the size of the inner circle
        radiusInside: 50,
        series: {
            //Change the serie a type 3d mode
            //this only works when the chart have PieChart3D type
            type:'PieSeries3D',
            category: 'country',
            value: 'litres',
            //Pie Chart Title
            name: 'Countries Water',
        },
    }
};

Note: We'll use the same data as above

Add Many Series#

Lets look at this data:

Code Example

const manySeriesData = [{
  "category": "Lithuania",
  "value": 501.9,
  "marketing": 250,
  "sales": 199
}, {
  "category": "Czech Republic",
  "value": 301.9,
  "marketing": 222,
  "sales": 251
}, {
  "category": "Ireland",
  "value": 201.1,
  "marketing": 170,
  "sales": 199
}, {
  "category": "Germany",
  "value": 165.8,
  "marketing": 122,
  "sales": 90
}, {
  "category": "Australia",
  "value": 139.9,
  "marketing": 99,
  "sales": 252
}];

To add many series to the pie chart you will have to give series param and array of series

Props#

PieChart Options Data#

name

type

default

description

type

PieChart3DPieChart

PieChart

Select the series type

legend

ObjectBoolean

false

Value that shows a Chart Legend

radiusInside

Number

30

Size of the inner Circle

series

objectarray>objects

Customize and add series

Series Data#

name

type

default

description

type

PieSeries3DPieSeries

PieSeries

Select the series type

value

String

category

value name param from data

Series types#

name

type

default

description

PieSeries3D

Show a 3d circle graph

PieSeries

Show a circle graph