Chart - Pie Chart

Storybook

Pie Chart Example


<vega-pie-chart id="pie-chart" style="height:200px"></vega-pie-chart>

const mockData = [
    {name:'A',value:10},
    {name:'B',value:10},
    {name:'C',value:20},
];
document.getElementById('pie-chart').options = {
	dataSource: mockData,
	layout: {
	    width:500,
	    height: 300,
	},
};

Donut Chart Example


<vega-pie-chart id="donut-chart" style="height:200px"></vega-pie-chart>


const mockData = [
    {name: 'A long string string string string string', value: 20, label: 'A'},
    {name:'B',value:20},
    {name:'C',value:20},
];
document.getElementById("donut-chart").options = {
    dataSource: mockData,
    legends: ['Test A', 'Test B', 'Test C'],
    type:'Donut',
	layout: {
	    width: 500,
	    height: 300,
	},
};

Usage

Pie charts and their close relation, Donut charts represent collections of data in a circular format. These each have slices designed to represent a percentage of data within the whole.

Purposes of Pie charts include:

  • Showing proportions of categories as they relate to the whole.
  • Comparisons between categories to indicate size relationships.
  • Displaying percentages.
  • Providing quick overviews of data.

Properties

Name Description Default
options* data source options
required		 -
options
type Define whether the chart is a pie or donut chart
Pie \| Donut
donutRadius The inner radius for the donut chart i
0-0.9
layout The chart layout
{ width:number\|string, height:number\|string, margin:{ top:number, left:number, right:number, bottom:number} }		 -
legends The chart legends. Required if the chart needs to display a legend.
string[]		 -
dataSource* The data source for the chart
{name:string,value:number,label:string}[]
colors The colors for the chart slices.
background color token array		 bg-accent1-primary bg-accent2-primary bg-accent3-primary bg-accent4-primary bg-accent5-primary bg-accent6-primar ybg-accent7-primary bg-accent8-primary
layout
width The width has the same width as the component by default. However you may set the width to a number or length string, such as 100, “100px” or “100%”,. Note that “100” is an incorrect value -
height The height has the same height as the component by default. However you may set the height to a number or length string, such as 100, “100px” or “100%”,. Note that “100” is an incorrect value -
margin The chart margin. The top, left, and bottom, and right margins should not be set to zero if you wish to show the legend, y-axis labels, or x-axis labels respectively.. number {top:30(No legends)/60(Has legends),right:30,bottom:30,left:6

Option Types


const ChartOptionsType = {
    legends: string[];
    colors: string[];
    layout: {
        width: number|string;
        height: number|string;
        margin: {
            top:number;
            right:number;
            bottom:number;
            left:number;
        }
    };
    dataSource: {
        name: string,
        value: number,
        label: string
    }[],
    type:'Pie' | 'Donut',
    donutRadius: number(0 - 0.9),
}

Methods

  • reRender is called to update the chart using existing options.

For example, since the chart’s default width is by default the same as the parent’s elemental width, without a set width the chart may display blank if the parent is hidden, such as in vega-modal or vega-tab-group. In this case, you will need to call the reRender method after the tab or modal is shown.

Example:

<vega-modal>
    <div>
        <vega-pie-chart id="pie-chart"></vega-pie-chart>
    </div>
</vega-modal>
<script>
    document.querySelector('#pie-chart').options = mockOptions;
    //after the modal is displayed
    document.querySelector('vega-modal').addEventListener('vegaOpen', () => {
        document.querySelector('#pie-chart').reRender();
    });
</script>

Best Practices

While Pie Charts and Donut charts may look good on a page, they may provide misleading information to the user.

It can be difficult to identify ratios on these chart types. Circular or area-based charts are difficult to interpret quickly and accurately at a glance. For instance, it may be difficult for users to identify which slice of the chart is larger.

Consider using them only for relatively small datasets with limited numbers of categories; for more complex datasets, bar or line charts may be better.