Pie Charts

import { PieChart, PieSlice } from 'cx/charts';

Pie charts are commonly used to compare parts to the whole. In Cx, pie charts are implemented using PieChart and PieSlice.

Item 1 (33.0)

Item 2 (17.2)

Item 3 (20.6)

Item 4 (21.6)

Item 5 (30.5)

Item 6 (35.0)

Item 7 (21.2)

Points	Gap	r0
7 points	4px	50%
Border Radius	Start Angle	Total Angle
6px	0deg	360deg

Controller PieChart

<Legend />
<Svg style="width:600px; height:400px;">
    <ColorMap />
    <PieChart angle-bind="$page.angle" startAngle-bind="$page.start" gap-bind="$page.gap">
        <Repeater records-bind="$page.points">
            <PieSlice
                value-bind="$record.value"
                active-bind="$record.active"
                colorMap="pie"
                r={80}
                r0-bind="$page.r0"
                borderRadius-bind="$page.borderRadius"
                tooltip={{
                    text: {
                        tpl: "Item {$index}: {$record.value:n;2}",
                    },
                    trackMouse: true,
                    globalMouseTracking: true,
                    destroyDelay: 50,
                    createDelay: 0,
                    animate: false,
                }}
                innerPointRadius={80}
                outerPointRadius={90}
                name-bind="$record.name"
                legendDisplayText-tpl="{$record.name} ({$record.value:n;1})"
                selection={{
                    type: KeySelection,
                    bind: "$page.selection",
                    records: { bind: "$page.points" },
                    record: { bind: "$record" },
                    index: { bind: "$index" },
                    keyField: "id",
                }}
            >

                <Line style="stroke:gray" />
                <Rectangle anchors='1 1 1 1' offset="-10 20 10 -20" style="fill:white; stroke: gray">
                    <Text tpl="{$record.value:n;1}" dy="0.4em" ta="middle" />
                </Rectangle>
            </PieSlice>
        </Repeater>
    </PieChart>
</Svg>
<LabelsTopLayout columns={3}>
    <Slider
        value-bind="$page.count"
        help-tpl="{$page.count} points"
        increment={1}
        step={1}
        minValue={1}
        maxValue={50}
        label="Points"
    />
    <Slider
        value-bind="$page.gap"
        help-tpl="{$page.gap}px"
        increment={1}
        step={1}
        minValue={0}
        maxValue={50}
        label="Gap"
    />
    <Slider
        value-bind="$page.r0"
        help-tpl="{$page.r0:ps;0}"
        increment={1}
        step={1}
        minValue={0}
        maxValue={70}
        label="r0"
    />
    <Slider
        value-bind="$page.borderRadius"
        help-tpl="{$page.borderRadius:n;0}px"
        increment={1}
        step={1}
        minValue={0}
        maxValue={50}
        label="Border Radius"
    />
    <Slider
        value-bind="$page.start"
        help-tpl="{$page.start:n;0}deg"
        increment={1}
        step={1}
        minValue={0}
        maxValue={270}
        label="Start Angle"
    />
    <Slider
        value-bind="$page.angle"
        help-tpl="{$page.angle:n;0}deg"
        increment={1}
        step={1}
        minValue={10}
        maxValue={360}
        label="Total Angle"
    />
</LabelsTopLayout>

Copied!Cx Fiddle

Examples

`PieChart` Configuration

Property	Description	Type
angle	Angle in degrees. Default is `360` which represents the full circle.	number
clockwise	When set to `true`, stacks are rendered in clock wise direction.	boolean
gap	Gap between slices in pixels. Default is `0` which means there is no gap.	number
startAngle	Start angle in degrees. Indicates the starting point of the first stack. Default is `0`.	number
anchors	Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. One aligns with the bottom/right edge. See Svg for more information.	string/number/rect
items children	List of child elements.	array
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
offset	Move boundaries specified by the offset. See Svg for more information.	string/number/rect
outerLayout	Defines the outer layout which wraps the widget.	widget
padding	Padding to be applied to the boundaries rectangle before passing to the children.	string/number/rect
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

`PieSlice` Configuration

Property	Description	Type
active	Used to indicate whether an item is active or not. Inactive items are shown only in the legend.	boolean
borderRadius br	Border radius of the slice. Default is `0`.	number
name	Name of the item as it will appear in the legend.	string
offset	Value in pixels to be used to explode the pie.	number
r	Outer pie radius in percents of the maximum available radius. If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is `50`.	number
r0	Inner pie radius in percents of the maximum available radius. If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is `0`.	number
selection	Selection model to be used.	config
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
hoverChannel	A value used to identify the group of components participating in hover effect synchronization. See HoverSync.	string
hoverId	A value used to uniquely identify the record within the hover sync group. See HoverSync.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
legend	Name of the legend to be used. Default is `legend`. Set to `false` to hide legend entry for this item.	string \| false
legendDisplayText	Text to be displayed in the legend. The default is copying the `name` value.	string
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
stack	Multi-level pie charts consist of multiple stacks. Assign a unique name to each level. Default is `stack`.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Pie Charts