loading... Pacem JS

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": "#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} ]

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": 0.275}, {"label": "item 7", "value": 0.7}, {"label": "item 8", "value": 2.15}, {"label": "item 9", "value": 1.333} ]