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



<window apply="demo.area.AreaStackedPercentComposer">
	<charts id="chart" type="area"/>
</window>

package demo.area;

import java.util.Map;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.chart.Title;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.AreaPlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.CategoryModel;
import org.zkoss.zul.SimpleCategoryModel;
import org.zkoss.zul.Window;


public class AreaStackedPercentComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		Title title = chart.getTitle();
		title.setText("Countries/regions with highest Gt CO<sub>2</sub>-emissions");
		title.setUseHTML(true);
		chart.setSubtitle("Source: " +
				"<a href=\"https://energiogklima.no/klimavakten/land-med-hoyest-utslipp/\"" +
				"target=\"_blank\">Energi og Klima</a>");
		chart.getAccessibility().getPoint().setValueDescriptionFormat("{index}. {point.category}, {point.y:,.1f} billions, {point.percentage:.1f}%.");

		int seriesIndex = 0;
		for (Map.Entry<String, Number[]> data : AreaStackedPercentData.getData().entrySet()) {
			Series series = chart.getSeries(seriesIndex++);
			series.setName(data.getKey());
			series.setData(data.getValue());
		}

		YAxis yAxis = chart.getYAxis();
		yAxis.getLabels().setFormat("{value}%");
		yAxis.setTitle("");

		chart.getTooltip().setPointFormat(
			"<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.1f} billion Gt)<br/>");
		chart.getTooltip().setSplit(true);

		chart.getPlotOptions().getSeries().setPointStart(1990);
		AreaPlotOptions plotOptions = chart.getPlotOptions().getArea();
		plotOptions.setStacking("percent");
		plotOptions.getMarker().setEnabled(false);
	}
}

package demo.area;

import java.util.LinkedHashMap;
import java.util.Map;

import org.zkoss.chart.model.CategoryModel;
import org.zkoss.chart.model.DefaultCategoryModel;


public class AreaStackedPercentData {
	private static final Map<String, Number[]> data;
	static {
		data = new LinkedHashMap<>();
		data.put("China", new Number[] {2.5, 2.6, 2.7, 2.9, 3.1, 3.4, 3.5, 3.5, 3.4, 3.4, 3.4,
				3.5, 3.9, 4.5, 5.2, 5.9, 6.5, 7, 7.5, 7.9, 8.6, 9.5, 9.8,
				10, 10, 9.8, 9.7, 9.9, 10.3, 10.5, 10.7, 10.9});
		data.put("USA", new Number[] {5.1, 5.1, 5.2, 5.3, 5.4, 5.4, 5.6, 5.7, 5.7, 5.8, 6, 5.9,
				5.9, 6, 6.1, 6.1, 6.1, 6.1, 5.9, 5.5, 5.7, 5.5, 5.3, 5.5,
				5.5, 5.4, 5.2, 5.2, 5.4, 5.3, 4.7, 5});
		data.put("EU", new Number[] {3.9, 3.8, 3.7, 3.6, 3.6, 3.6, 3.7, 3.7, 3.6, 3.6, 3.6, 3.7,
				3.7, 3.7, 3.8, 3.7, 3.7, 3.7, 3.6, 3.3, 3.4, 3.3, 3.3, 3.2, 3,
				3.1, 3.1, 3.1, 3, 2.9, 2.6, 2.7});
		data.put("India", new Number[] {0.6, 0.6, 0.7, 0.7, 0.7, 0.8, 0.8, 0.9, 0.9, 1, 1, 1,
				1, 1.1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 2, 2,
				2.2, 2.3, 2.4, 2.4, 2.6, 2.6, 2.4, 2.7});
	}
	
	public static Map<String, Number[]> getData() {
		return data;
	}
}