Pie

Basic usage

Pass an array of objects to Datum.pie()and identify the properties containing the label and value.

import { Datum, Color } from '@psdpainter/datum-js';

const values = [
    { category: 'Desktop', value: 48 },
    { category: 'Mobile', value: 32 },
    { category: 'Tablet', value: 14 },
    { category: 'Other', value: 6 }
];

Datum.chart({
    target: '#pie-example',
    height: 320,
    datum: [
        Datum.pie(values, {
            label: 'category',
            value: 'value',
            colors: [
                Color.Blue,
                Color.Green,
                Color.Orange,
                Color.Red
            ]
        })
    ]
});

Syntax

Datum.pie(data, {
    label,
    value,
    innerRadius,
    stroke,
    strokeWidth,
    opacity,
    colors,
    showLabels,
    labelPosition,
    tooltip
});

Data

By default, Datum expects each item to containlabel and value properties.

const values = [
    { label: 'Desktop', value: 48 },
    { label: 'Mobile', value: 32 },
    { label: 'Tablet', value: 14 },
    { label: 'Other', value: 6 }
];

Datum.pie(values);

Primitive numeric arrays are also supported.

Datum.pie([48, 32, 14, 6]);

Numeric values are automatically assigned labels beginning with '1'.

Data keys

Use label and value to map custom property names.

const values = [
    { category: 'Desktop', amount: 48 },
    { category: 'Mobile', amount: 32 },
    { category: 'Tablet', amount: 14 }
];

Datum.pie(values, {
    label: 'category',
    value: 'amount'
});

Donut charts

Use innerRadius to create a donut chart. Values below 1 are interpreted as a proportion of the outer radius.

Datum.pie(values, {
    innerRadius: 0.6
});

An absolute pixel value can also be used.

Datum.pie(values, {
    innerRadius: 60
});

Colors

Use colors to provide the sequence of colors used to render slices.

Datum.pie(values, {
    colors: [
        Color.Blue,
        Color.Green,
        Color.Orange,
        Color.Red
    ]
});

If there are more slices than colors, Datum repeats the color sequence.

Labels

Percentage labels are displayed on slices by default. Use showLabels to disable them.

Datum.pie(values, {
    showLabels: false
});

Use labelPosition to position labels inside or outside the pie.

Datum.pie(values, {
    labelPosition: 'outside'
});

Stroke

Use stroke and strokeWidth to style the boundaries between slices.

Datum.pie(values, {
    stroke: '#ffffff',
    strokeWidth: 2
});

Opacity

Use opacity to control the transparency of the slices. The default is 1.

Datum.pie(values, {
    opacity: 0.7
});

Tooltips

Pie slices support discrete tooltips containing the slice label, value, and percentage.

Tooltips can be disabled for the layer withtooltip: false.

Datum.pie(values, {
    tooltip: false
});

Options

{
    label: 'label',
    value: 'value',
    innerRadius: 0,
    stroke: '#ffffff',
    strokeWidth: 2,
    opacity: 1,
    colors: DEFAULT_SERIES_COLORS,
    showLabels: true,
    labelPosition: 'inside'
}