<?xml version="1.0" encoding="UTF-8"?>



<window apply="demo.pie.PieBasicComposer">
	<charts id="chart" type="pie" title="Browser market shares in May, 2020"/>
</window>

package demo.pie;

import org.zkoss.chart.Chart;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Color;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.plotOptions.PieDataLabels;
import org.zkoss.chart.plotOptions.PiePlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class PieBasicComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.setPlotBackgroundColor((Color) null);
		chart.setPlotBorderWidth(null);
		chart.setPlotShadow(false);

		chart.getTooltip().setPointFormat("{series.name}: <b>{point.percentage:.1f}%</b>");

		chart.getAccessibility().getPoint().setValueSuffix("%");

		PiePlotOptions plotOptions = chart.getPlotOptions().getPie();

		plotOptions.setAllowPointSelect(true);
		plotOptions.setCursor("pointer");
		PieDataLabels dataLabels = (PieDataLabels)plotOptions.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormat("<b>{point.name}</b>: {point.percentage:.1f} %");

		Series series = chart.getSeries();
		series.setName("Brands");
		series.setColorByPoint(true);

		Point chrome = new Point("Chrome", 70.67);
		chrome.setSelected(true);
		chrome.setSliced(true);
		series.addPoint(chrome);
		series.addPoint(new Point("Edge", 14.77));
		series.addPoint(new Point("Firefox", 4.86));
		series.addPoint(new Point("Safari", 2.63));
		series.addPoint(new Point("Internet Explorer", 1.53));
		series.addPoint(new Point("Opera", 1.40));
		series.addPoint(new Point("Sogou Explorer", 0.84));
		series.addPoint(new Point("QQ", 0.51));
		series.addPoint(new Point("Other", 2.6));
	}
}