Usage
<cui-pie-chart id="pieChart" ui-base-color="#77E3F5" ui-is-half="false" ui-shape="pie"
ui-segments='[
{ "label": "Chrome", "value": 72, "tooltip": "Chrome \u2014 used by 72% of visitors" },
{ "label": "Safari", "value": 10, "tooltip": "Safari \u2014 10% of visitors" },
{ "label": "Firefox", "value": 8, "tooltip": "Firefox \u2014 8% of visitors" },
{ "label": "Edge", "value": 6, "tooltip": "Edge \u2014 6% of visitors" },
{ "label": "Other", "value": 4, "tooltip": "Other browsers \u2014 4% of visitors" }
]'></cui-pie-chart>
const pieChart = $UI.createComponent(componyx.UI.PieChart, {
id: 'pieChart',
baseColor: '#77E3F5',
isHalf: false,
shape: componyx.UI.PieChart.ShapeOption.PIE,
segments: [
{ label: 'Chrome', value: 72, tooltip: 'Chrome \u2014 used by 72% of visitors' },
{ label: 'Safari', value: 10, tooltip: 'Safari \u2014 10% of visitors' },
{ label: 'Firefox', value: 8, tooltip: 'Firefox \u2014 8% of visitors' },
{ label: 'Edge', value: 6, tooltip: 'Edge \u2014 6% of visitors' },
{ label: 'Other', value: 4, tooltip: 'Other browsers \u2014 4% of visitors' }
],
containerElement: document.body
});
pieChart.show();
shape accepts the componyx.UI.PieChart.ShapeOption enum:
'pie' or 'donut'.
Our demo above sets ui-base-color="#77E3F5" and leaves color
unset on every segment, so each segment's color is generated automatically by shifting
the hue of baseColor around the color wheel. You can still set an explicit
color on any individual segment to override the generated one and mix the
two freely, segments with a color keep it, segments without one still get
auto-generated.
Segments also support an endColor. Set both color and
endColor on a segment to render it as a gradient from one to the other,
instead of a flat fill.