Home Elements Boards Recipes

Pie Microchart

The Pie Microchart displays a pie with segments corresponding to the fraction of the given values.

PieChart Screenshot

Options

The Pie Chart requires to set the options to create the scale of the chart including the colors of the arc in the background.

chartAPI.setOptions({
  showTitle: false,
  showValue: false,
  showPercentage: true,
  colors: []
});

Any color can be used in the colors properties that is understood by SVG. It can either be passed in the options or in the data.

When there are more data items than colors, the colors will be used from the start again.

Add additional elements

The Pie Chart has no additional elements to be added. The add() method is available but without any effect.

Draw the data

The data passed to the draw() method is an array of objects with title, value and color. All but the value are optional.

chartAPI.draw(
  { title: 'used', value: 800000, color: 'rgb(0,0,128)' },
  { title: 'reserved', value: 200000, color: 'hsl(180,50%,50%)'},
  { title: 'available', value: 1200000, color: 'silver' });

Based on the values the total and percentage of the segment will be calculated.

When updating the value all values must be given at once.

Clear the data

The clear() method will remove the pie completely.

See also

Tags

Implementation System