<?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.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.setModel(PieSemiCircleData.getPieModel());
		
		Chart chartOptional = chart.getChart();
		chartOptional.setPlotBorderWidth(0);
		chartOptional.setPlotShadow(false);
		
		Title title = chart.getTitle();
		title.setText("Browser<br>shares");
		title.setAlign("center");
		title.setVerticalAlign("middle");
		title.setY(50);
		
		chart.getTooltip().setPointFormat("{series.name}: <b>{point.percentage:.1f}%</b>");
		
		PiePlotOptions poltOptions = chart.getPlotOptions().getPie();
		
		DataLabels dataLabels = poltOptions.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setDistance(-50);
		dataLabels.setStyle("fontWeight: 'bold'; color: 'white'; textShadow: '0px 1px 2px black'");
		poltOptions.setStartAngle(-90);
		poltOptions.setEndAngle(90);
		poltOptions.setCenter("50%", "75%");
		poltOptions.setInnerSize("50%");
		
		chart.getSeries().setName("Browser share");
	}
}

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("Firefox", 45.0);
		model.setValue("IE", 26.8);
		model.setValue("Chrome", 12.8);
		model.setValue("Safari", 8.5);
		model.setValue("Opera", 6.2);
		model.setValue("Others", 0.7);
	}
	
	public static PieModel getPieModel() {
		return model;
	}
}