Multi-level Pie Charts
This example shows how to implement a multilevel pie chart.
<div class="widgets" controller={PageController}>
<Legend />
<Svg style="width:400px; height:400px;">
<PieChart angle={360}>
<Repeater records-bind="$page.points">
<PieSlice value-bind='$record.v'
active-bind='$record.active'
colorIndex-expr='{$index} * 3 % 16'
r={55}
r0={20}
offset={3}
name-tpl="Item {$index}"
selection={{
type: KeySelection,
bind:'$page.selection',
records: {bind:'$page.points'},
record: {bind:'$record'},
index: {bind:'$index'},
keyField: 'x'
}}
borderRadius={3}
>
</PieSlice>
<Repeater records-bind="$record.slices" recordAlias="$slice" indexAlias="$sliceIndex">
<PieSlice value-bind='$slice.sv'
active-bind='$record.active'
colorIndex-expr='{$index} * 3 % 16'
r={90}
r0={58}
offset={3}
name-tpl="Slice {$sliceIndex}"
legend-expr="{$page.selection} == {$record.x} ? 'slice' : false"
stack="outer"
style={{
fillOpacity: {expr: '0.3 + 0.7 * ({$sliceIndex} / 4)'}
}}
selection={{
type: KeySelection,
bind:'$page.selection',
records: {bind:'$page.points'},
record: {bind:'$record'},
index: {bind:'$index'},
keyField: 'x'
}}
borderRadius={3}
>
</PieSlice>
</Repeater>
</Repeater>
</PieChart>
</Svg>
<Legend name="slice" vertical />
</div>