Pie.md

Pie

A native pie chart using D3 based on standard design patterns. A Pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.

• Pie
  • Usage
  • Structure
  • JSON Properties
    • Root
      • Required
      • Optional
    • Data
      • Required
      • Optional
    • Dimension
      • Optional

Usage

Structure

You will not need all the properties in the example below. Check out optional/required properties explained in the JSON Properties section.

var root = {
    bindTo: "#root",
    showLegend: true
};
var pieDefault = Carbon.api.pie(root);

Data can be provided one at a time within loadContent or as an array

var data = {
    key: "uid_1",
    label: {
        display: "Blue"
    },
    color: Carbon.helpers.COLORS.BLUE,
    onClick: (onCloseCB, key, index, value) => {
        // onCloseCB needs to called by the consumer after popup is closed to deselect data point.
    },
    value: 50
};
pieDefault.loadContent(data);

For loading multiple data-sets, you can load as additional content:

var dataArray = [
    {
        key: "uid_2",
        label: {
            display: "ORANGE"
        },
        color: Carbon.helpers.COLORS.ORANGE,
        value: 60
    },
    {
        key: "uid_3",
        label: {
            display: "Green"
        },
        color: Carbon.helpers.COLORS.GREEN,
        value: 10
    },
    {
        key: "uid_4",
        label: {
            display: "Light Purple"
        },
        color: Carbon.helpers.COLORS.LIGHT_PURPLE,
        value: 30
    }
];
pieDefault.loadContent(dataArray);

JSON Properties

Root

Required

Property Name	Expected	Description
bindTo	string	DOM id to bind the graph into
data	[]object	Refer Data. This is not an actual object property rather this is provided as a parameter to loadContent

Optional

Property Name	Expected	Default	Description
bindLegendTo	string	null	If DOM id provided, binds legend into that container (Example: "#legendContainer")
dimension	object	{}	Refer Dimension
legendPadding	object	{ top: 8, bottom: 8, left: 8, right: 8 }	Sets the legend padding and removes the carbon default margin of 8px around legend
removeContainerPadding	boolean	false	Toggle to remove carbon container top and bottom padding
showLegend	boolean	true	Toggle to show graph legend

Data

Required

Property Name	Expected	Description
key	string	Unique id which represents the slice
label	object	Display value each slice
value	number	Value of the slice

Optional

Property Name	Expected	Default	Description
color	string	COLORS.BLUE	Color for slice. It is recommended to use values from COLORS sequentially except BLACK
onClick	Function	undefined	Any action that can be performed when clicking on the data point

Dimension

Optional

Property Name	Expected	Default	Description
height	number	250	Sets the size of pie chart