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



<window apply="demo.bar.ColumnStackedPercentComposer">
	<charts id="chart" type="column" title="UEFA CL most assists by season"/>
</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.getYAxis().setMin(0);
		chart.getYAxis().setTitle("Assists");
		
		
		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");
	}
}

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("Kevin De Bruyne", "2021/22", 4);
		model.setValue("Kevin De Bruyne", "2020/21", 4);
		model.setValue("Kevin De Bruyne", "2019/20", 2);
		model.setValue("Kevin De Bruyne", "2018/19", 4);
		model.setValue("Kevin De Bruyne", "2017/18", 4);
		model.setValue("Joshua Kimmich", "2021/22", 0);
		model.setValue("Joshua Kimmich", "2020/21", 4);
		model.setValue("Joshua Kimmich", "2019/20", 3);
		model.setValue("Joshua Kimmich", "2018/19", 2);
		model.setValue("Joshua Kimmich", "2017/18", 3);
		model.setValue("Sadio Mané", "2021/22", 1);
		model.setValue("Sadio Mané", "2020/21", 2);
		model.setValue("Sadio Mané", "2019/20", 2);
		model.setValue("Sadio Mané", "2018/19", 1);
		model.setValue("Sadio Mané", "2017/18", 2);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}