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



<window apply="demo.bar.ColumnStackedPercentComposer">
	<charts id="chart" type="column" title="Domestic passenger transport by mode of transport, Norway"/>
</window>

package demo.bar;

import org.zkoss.chart.Charts;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class ColumnStackedPercentComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.setModel(ColumnStackedPercentData.getCategoryModel());

		chart.setSubtitle("Source: <a href=\"https://www.ssb.no/transport-og-reiseliv/landtransport/statistikk/innenlandsk-transport\">SSB</a>");

		chart.getYAxis().setMin(0);
		chart.getYAxis().setTitle("Percent");

		chart.getTooltip().setPointFormat("<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>");
		chart.getTooltip().setShared(true);
		
		chart.getPlotOptions().getColumn().setStacking("percent");
		chart.getPlotOptions().getColumn().getDataLabels().setEnabled(true);
		chart.getPlotOptions().getColumn().getDataLabels().setFormat("{point.percentage:.0f}%");
	}
}

package demo.bar;

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



public class ColumnStackedPercentData {
	private static CategoryModel model;
	static {
		model = new DefaultCategoryModel();
		model.setValue("Road", "2019", 434);
		model.setValue("Road", "2020", 290);
		model.setValue("Road", "2021", 307);
		model.setValue("Rail", "2019", 272);
		model.setValue("Rail", "2020", 153);
		model.setValue("Rail", "2021", 156);
		model.setValue("Air", "2019", 13);
		model.setValue("Air", "2020", 7);
		model.setValue("Air", "2021", 8);
		model.setValue("Sea", "2019", 55);
		model.setValue("Sea", "2020", 35);
		model.setValue("Sea", "2021", 41);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}