PacemPieChartElement is a handy webcomponent that renders pie and doughnut charts, it all depends on the bindable cutout property.
Its PacemPieSliceElement children define the slices of the chart.
The child-slices of a pie-chart can be easily changed by exploiting a PacemRepeaterElement. Everytime a change occurs (number of slices, single slice value, ...)
a draw task gets generated for the whole chart.
The following live example sums up what can be done with a pie-chart webcomponent.
[ {"label": "item 1", "color": "#ff005a", "value": 2}, {"label": "item 2", "color": "#d5d033", "value": 1.5}, {"label": "item 3", "color": "#429bbb", "value": 1.625}, {"label": "item 4", "color": "#a7f8ab", "value": 0.75} ]
Preconfigured coloring can be applied either to the whole chart (results in gradient coloring) or per-single slice.
Involved css classes are, respectively, chart-<color> and slice-<color>.
Declarative listeners can be added to the single slices in order to intercept click, mouseover, touchstart, mouseout, ... events.
In the following example, tooltip capabilities are added by intercepting slices' mouseenter and chart's mouseleave events.
[ {"label": "item 1", "value": 2}, {"label": "item 2", "value": 1.5}, {"label": "item 3", "value": 1.625}, {"label": "item 4", "value": 0.75}, {"label": "item 5", "value": 1.75}, {"label": "item 6", "value": 0.275}, {"label": "item 7", "value": 0.7}, {"label": "item 8", "value": 2.15}, {"label": "item 9", "value": 1.333} ]