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



<window apply="demo.pie.PieGradientComposer">
	<charts id="chart" type="pie" title="Browser market shares in April, 2022"/>
</window>

package demo.pie;

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

import org.zkoss.chart.Chart;
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("<b>{point.name}</b>: {point.percentage:.1f} %");
		dataLabels.setConnectorColor("silver");
		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 = {
				{"#7cb5ec", "rgb(48,105,160)"},
				{"#434348", "rgb(0,0,0)"},
				{"#90ed7d", "rgb(68,161,49)"},
				{"#f7a35c", "rgb(171,87,16)"},
				{"#8085e9", "rgb(52,57,157)"},
				{"#f15c80", "rgb(165,16,52)"},
				{"#e4d354", "rgb(152,135,8)"},
				{"#2b908f", "rgb(0,68,67)"},
				{"#f45b5b", "rgb(168,15,15)"},
				{"#91e8e1", "rgb(69,156,149)"}
		};
		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("Chrome", 73.24));
        series.addPoint(new Point("Edge", 12.93));
		series.addPoint(new Point("Firefox", 4.73));
        series.addPoint(new Point("Safari", 2.50));
        series.addPoint(new Point("Internet Explorer", 1.65));
        series.addPoint(new Point("Other", 4.93));
	}
}