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



<window apply="demo.bar.ColumnStackedPercentComposer">
	<charts id="chart" type="column" title="Stacked column chart"/>
</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("Total fruit consumption");
		
		
		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("John", "Apples", 5);
		model.setValue("John", "Oranges", 3);
		model.setValue("John", "Pears", 4);
		model.setValue("John", "Grapes", 7);
		model.setValue("John", "Bananas", 2);
		model.setValue("Jane", "Apples", 2);
		model.setValue("Jane", "Oranges", 2);
		model.setValue("Jane", "Pears", 3);
		model.setValue("Jane", "Grapes", 2);
		model.setValue("Jane", "Bananas", 1);
		model.setValue("Joe", "Apples", 3);
		model.setValue("Joe", "Oranges", 4);
		model.setValue("Joe", "Pears", 4);
		model.setValue("Joe", "Grapes", 2);
		model.setValue("Joe", "Bananas", 5);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}