Pie Labels

import { PieLabelsContainer, PieLabel } from 'cx/charts';

PieLabels are used to display values of each pie slice. They will automatically adjust position to accommodate for a large number of values. PieLabels must be used inside of a PieLabelsContainer component.

Use the offset property to define the bounding box of the label. Use the distance property to adjust the distance of the label from the pie chart. Text within can be centered, or auto-aligned to the left or right side if autoTextAnchor is set to true. In that case anchors have to be set 0.5 1 0.5 0 and margin can be used add extra space between the label and the lead line.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Points	Distance	Auto-align Labels
points	px

Controller Chart

<div class="widgets" controller={PageController} style="padding: 20px">
   <Legend />
   <div>
      <Svg style="width:600px; height:400px;">
         <ColorMap />
         <PieLabelsContainer>
            <PieChart gap={2}>
               <Repeater records-bind="points">
                  <PieSlice
                     value-bind="$record.value"
                     active-bind="$record.active"
                     colorMap="pie"
                     r={60}
                     r0={20}
                     offset={5}
                     tooltip={{
                        text: {
                           tpl: "Item {$index}: {$record.value:n;2}",
                        },
                        trackMouse: true,
                        globalMouseTracking: true,
                        destroyDelay: 50,
                        createDelay: 0,
                        animate: false,
                     }}
                     innerPointRadius={60}
                     outerPointRadius={70}
                     name-bind="$record.name"
                     selection={{
                        type: KeySelection,
                        bind: "selection",
                        records: { bind: "points" },
                        record: { bind: "$record" },
                        index: { bind: "$index" },
                        keyField: "id",
                     }}
                  >
                     <Line style="stroke:gray" />
                     <PieLabel anchors="1 1 1 1" offset="-12 50 12 -50" distance-bind="distance" lineStroke="gray">
                        <Rectangle style="stroke: rgba(0, 0, 0, 0.1); fill: none" visible-expr="!{autoAlignLabels}"/>
                        <Text visible-expr="!{autoAlignLabels}" tpl="{$record.name} ({$record.value:n;1})" dy="0.37em" textAnchor="middle" />
                        <Text visible-expr="!!{autoAlignLabels}" tpl="{$record.name} ({$record.value:n;1})" dy="0.37em"  autoTextAnchor anchors="0.5 1 0.5 0" margin="0 5 0 5" />
                     </PieLabel>
                  </PieSlice>
               </Repeater>
            </PieChart>
         </PieLabelsContainer>
      </Svg>
   </div>
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
distance	Distance in pixels, for which the labels will be separated from the pie chart. Default value is 100px, but when a large number of values is rendered, it is recommended to have a larger distance.	number
lineClass	CSS class applied to the line element.	string/object
lineStroke	A color used to paint the line.	string
lineStyle	CSS style applied to the line element.	string/object
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
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
items children	List of child elements.	array
lineColorIndex	Index of the color in the default color palette.	number
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
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
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 Labels