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



<window apply="demo.bar.BarBasicComposer">
	<charts id="chart" type="bar"
		title="Historic World Population by Region"/>
</window>

package demo.bar;

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


public class BarBasicComposer extends SelectorComposer<Window> {

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

		chart.setSubtitle("Source: <a " +
				"href=\"https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population\"" +
				"target=\"_blank\">Wikipedia.org</a>");
		
		chart.setModel(BarBasicData.getCategoryModel());
		chart.getXAxis().setTitle("");
		
		YAxis yAxis = chart.getYAxis();
		yAxis.setMin(0);
		yAxis.setTitle("Population (millions)");
		yAxis.getTitle().setAlign("high");
		yAxis.getLabels().setOverflow("justify");
		
		chart.getTooltip().setValueSuffix(" millions");
		
		chart.getPlotOptions().getBar().getDataLabels().setEnabled(true);
		
		Legend legend = chart.getLegend();
		legend.setLayout("vertical");
		legend.setAlign("right");
		legend.setVerticalAlign("top");
		legend.setX(-40);
		legend.setY(80);
		legend.setFloating(true);
		legend.setBorderWidth(1);
		legend.setBackgroundColor("#FFFFFF");
		legend.setShadow(true);
		
		chart.getCredits().setEnabled(false);
	}
}

package demo.bar;

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



public class BarBasicData {
	private static CategoryModel model;
	static {
		model = new DefaultCategoryModel();
		model.setValue("Year 1990", "Africa", 631);
		model.setValue("Year 1990", "America", 727);
		model.setValue("Year 1990", "Asia", 3202);
		model.setValue("Year 1990", "Europe", 721);
		model.setValue("Year 1990", "Oceania", 26);
		model.setValue("Year 2000", "Africa", 814);
		model.setValue("Year 2000", "America", 841);
		model.setValue("Year 2000", "Asia", 3714);
		model.setValue("Year 2000", "Europe", 726);
		model.setValue("Year 2000", "Oceania", 31);
		model.setValue("Year 2010", "Africa", 1044);
		model.setValue("Year 2010", "America", 944);
		model.setValue("Year 2010", "Asia", 4170);
		model.setValue("Year 2010", "Europe", 735);
		model.setValue("Year 2010", "Oceania", 40);
		model.setValue("Year 2018", "Africa", 1276);
		model.setValue("Year 2018", "America", 1007);
		model.setValue("Year 2018", "Asia", 4561);
		model.setValue("Year 2018", "Europe", 746);
		model.setValue("Year 2018", "Oceania", 42);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}