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


<window apply="demo.charts3d.Column3DStackComposer">
	<charts id="chart" type="column" title=" Electricity production in countries, grouped by continent" />
</window>

package demo.charts3d;

import org.zkoss.chart.AxisLabels;
import org.zkoss.chart.AxisTitle;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.options3D.Options3D;
import org.zkoss.chart.plotOptions.ColumnPlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;



public class Column3DStackComposer extends SelectorComposer<Window> {
	
	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		Options3D options3D = chart.getOptions3D();
		options3D.setEnabled(true);
		options3D.setAlpha(15);
		options3D.setBeta(15);
		options3D.setViewDistance(25);
		options3D.setDepth(40);

		AxisLabels labels = chart.getXAxis().getLabels();
		labels.setSkew3D(true);
		labels.setStyle("fontSize: 16px");

		YAxis yAxis = chart.getYAxis();
		yAxis.setAllowDecimals(false);
		yAxis.setMin(0);
		AxisTitle title = yAxis.getTitle();
		title.setText("TWh");
		title.setSkew3d(true);
		title.setStyle("fontSize: 16px");

		Tooltip tooltip = chart.getTooltip();
		tooltip.setHeaderFormat("<b>{point.key}</b><br>");
		tooltip.setPointFormat("<span style=\"color:{series.color}\">\\u25CF</span> {series.name}: {point.y} / {point.stackTotal}");

		chart.getPlotOptions().getSeries().setPointStart(2016);
		ColumnPlotOptions column = chart.getPlotOptions().getColumn();
		column.setStacking("normal");
		column.setDepth(40);

		Series series0 = chart.getSeries();
		series0.setName("South Korea");
		series0.setData(563, 567, 590, 582, 571);
		series0.setStack("Asia");

		Series series1 = chart.getSeries(1);
		series1.setName("Germany");
		series1.setData(650, 654, 643, 612, 572);
		series1.setStack("Europe");

		Series series2 = chart.getSeries(2);
		series2.setName("Saudi Arabia");
		series2.setData(368, 378, 378, 367, 363);
		series2.setStack("Asia");

		Series series3 = chart.getSeries(3);
		series3.setName("France");
		series3.setData(564, 562, 582, 571, 533);
		series3.setStack("Europe");
	}
}