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



<window apply="demo.pie.PieGradientComposer">
	<charts id="chart" type="pie" title="Registered private vehicles in Norway, by type of fuel, 2020"/>
</window>

package demo.pie;

import java.util.LinkedList;
import java.util.List;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Color;
import org.zkoss.chart.Point;
import org.zkoss.chart.RadialGradient;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.plotOptions.PieDataLabels;
import org.zkoss.chart.plotOptions.PiePlotOptions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class PieGradientComposer 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 pie = chart.getPlotOptions().getPie();
		pie.setAllowPointSelect(true);
		pie.setCursor("pointer");
		PieDataLabels dataLabels = (PieDataLabels) pie.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormat("<span style=\"font-size: 1.2em\"><b>{point.name}</b></span><br>" +
								"<span style=\"opacity: 0.6\">{point.percentage:.1f} %</span>");
		dataLabels.setConnectorColor("rgba(128,128,128,0.5)");
		initGradientColors();
		initSeries();
		
		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				Theme theme = chart.getTheme();
				PieDataLabels dataLabels = (PieDataLabels) chart.getPlotOptions().getPie().getDataLabels();
				if (theme.equals(Theme.GRAY)) {
					dataLabels.setColor("#FFFFFF");
					dataLabels.setConnectorColor("#FFFFFF");
				} else {
					dataLabels.setColor((String)null);
					dataLabels.setConnectorColor((String)null);
				}
	    	}
		});
	}
	
	private void initGradientColors() {
		List<Color> gradientColors = new LinkedList<Color>();
		String[][] colors = {
				{"#2caffe", "rgb(0,99,178)"},
				{"#544fc5", "rgb(8,3,121)"},
				{"#00e272", "rgb(0,150,38)"},
				{"#fe6a35", "rgb(178,30,0)"},
				{"#6b8abc", "rgb(31,62,112)"},
				{"#d568fb", "rgb(137,28,175)"},
				{"#2ee0ca", "rgb(0,173,151)"},
				{"#fa4b42", "rgb(199,24,15)"},
				{"#feb56a", "rgb(203,130,55)"},
				{"#91e8e1", "rgb(94,181,174)"}
		};
		for (String[] color: colors) {
			RadialGradient radialGradient = new RadialGradient(0.5, 0.3, 0.7);
			radialGradient.setStops(color[0], color[1]);
			gradientColors.add(new Color(radialGradient));
		}
		chart.setColors(gradientColors);
	}
	
	private void initSeries() {
        Series series = chart.getSeries();
        series.setName("Share");
		series.addPoint(new Point("Petrol", 938899));
		series.addPoint(new Point("Diesel", 1229600));
		series.addPoint(new Point("Electricity", 325251));
		series.addPoint(new Point("Other", 238751));
	}
}