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



<window apply="demo.pie.PieSemiCircleComposer">
	<charts type="pie" id="chart"/>
</window>

package demo.pie;

import org.zkoss.chart.Chart;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Color;
import org.zkoss.chart.Series;
import org.zkoss.chart.Title;
import org.zkoss.chart.plotOptions.DataLabels;
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 PieSemiCircleComposer 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("%");

		Title title = chart.getTitle();
		title.setText("Browser<br>shares<br>January<br>2022");
		title.setAlign("center");
		title.setVerticalAlign("middle");
		title.setY(60);
		

		PiePlotOptions poltOptions = chart.getPlotOptions().getPie();
		
		DataLabels dataLabels = poltOptions.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setDistance(-50);
		dataLabels.setStyle("fontWeight: 'bold'; color: 'white';");
		poltOptions.setStartAngle(-90);
		poltOptions.setEndAngle(90);
		poltOptions.setCenter("50%", "75%");
		poltOptions.setSize("110%");

		Series series = chart.getSeries();
		series.setName("Browser share");
		series.setType("pie");
		series.setInnerSize("50%");

		chart.setModel(PieSemiCircleData.getPieModel());

		series.getData().get(series.getData().size() - 1).getDataLabels().setEnabled(false);
	}
}

package demo.pie;

import org.zkoss.chart.model.DefaultPieModel;
import org.zkoss.chart.model.PieModel;


public class PieSemiCircleData {
	private static final PieModel model;
	static {
		model = new DefaultPieModel();
		model.setValue("Chrome", 73.86);
		model.setValue("Edge", 11.97);
		model.setValue("Firefox", 5.52);
		model.setValue("Safari", 2.98);
		model.setValue("Internet Explorer", 1.90);
		model.setValue("Other", 3.77);
	}
	
	public static PieModel getPieModel() {
		return model;
	}
}