## Pie or Doughnut `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. ## Data-driven 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": "success", "value": 2},
{"label": "item 2", "color": "warning", "value": 1.5},
{"label": "item 3", "color": "primary", "value": 1.625},
{"label": "item 4", "color": "error", "value": 0.75}
]
## Styling 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>`. ## Behavior 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": 4.275},
{"label": "item 7", "value": 0.7},
{"label": "item 8", "value": 2.15},
{"label": "item 9", "value": 1.333}
]
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.