pie

• Quick Reference
• API

Quick Reference

import { pie } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
	chart: {
		height: 420,
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},

	data: {
		x: { accessor: 'age', type: 'number', name: 'Age' },
		y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
	},
};

const fakeData = [
	{ age: 19, income: 9 }
]

const chart = new pie('#chart', options);
chart.render(fakeData);

API

Default options:

{
    chart: {
        type: 'pie'
    },
    plots: {
      othersTitle: 'Others',
      isDonut: false,
      opacity: 0.8,
      innerRadiusRatio: 0.4,
      outerRadiusMargin: 30,
      labelOffset: 20,
      labelControlPointRadius: 6,
      labelPosition: 'auto',
      labelMinPercentage: 0.01,
    },
}

othersTitle

Slices that have very small percentages will be displayed together as 'Others', the label text is determined by this attribute

isDonut

Display a donut or pie?

opacity

Slice opacity

innerRadiusRatio

inner radius of donut. Will take effect when donut is true

outerRadiusMargin

outer radius of donut. Will take effect when donut is true

labelOffset

Label offset against outer edge of pie

labelControlPointRadius

Radius of control points

labelPosition

Label position, 'auto' by default, can changed to 'top'

labelMinPercentage

threshold of determining when to bundle slices into a 'others' slice