Documentation

Report Edit

Multi-level Pie Charts

This example shows how to implement a multilevel pie chart.

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<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>
Copied!Cx Fiddle