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



<window apply="demo.bar.ColumnBasicComposer">
	<charts id="chart" type="column"
		title="Emissions to air in Norway"/>
</window>

package demo.bar;

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


public class ColumnBasicComposer extends SelectorComposer<Window> {

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

		chart.setSubtitle("Source: " +
				"<a href=\"https://www.ssb.no/en/statbank/table/08940/\" " +
				"target=\"_blank\">SSB</a>");
		chart.setModel(ColumnBasicData.getCategoryModel());
		
		chart.getXAxis().setCrosshair(true);
		
		AxisTitle title = chart.getYAxis().getTitle();
		title.setUseHTML(true);
		title.setText("Million tonnes CO<sub>2</sub>-equivalents");
		
		Tooltip tooltip = chart.getTooltip();
		tooltip.setHeaderFormat("<span style=\"font-size:10px\">{point.key}</span><table>");
		tooltip.setPointFormat("<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td>"
			+ "<td style=\"padding:0\"><b>{point.y:.1f}</b></td></tr>");
		tooltip.setFooterFormat("</table>");
		tooltip.setShared(true);
		tooltip.setUseHTML(true);
		
		chart.getPlotOptions().getColumn().setPointPadding(0.2);
		chart.getPlotOptions().getColumn().setBorderWidth(0);
	}
}

package demo.bar;

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


public class ColumnBasicData {
	private static CategoryModel model;
	static {
		model = new DefaultCategoryModel();
		model.setValue("Oil and gas extraction", "2010", 13.93);
		model.setValue("Oil and gas extraction", "2011", 13.63);
		model.setValue("Oil and gas extraction", "2012", 13.73);
		model.setValue("Oil and gas extraction", "2013", 13.67);
		model.setValue("Oil and gas extraction", "2014", 14.37);
		model.setValue("Oil and gas extraction", "2015", 14.89);
		model.setValue("Oil and gas extraction", "2016", 14.56);
		model.setValue("Oil and gas extraction", "2017", 14.32);
		model.setValue("Oil and gas extraction", "2018", 14.13);
		model.setValue("Oil and gas extraction", "2019", 13.93);
		model.setValue("Oil and gas extraction", "2020", 13.21);
		model.setValue("Oil and gas extraction", "2021", 12.16);
		model.setValue("Manufacturing industries and mining", "2010", 12.24);
		model.setValue("Manufacturing industries and mining", "2011", 12.24);
		model.setValue("Manufacturing industries and mining", "2012", 11.95);
		model.setValue("Manufacturing industries and mining", "2013", 12.02);
		model.setValue("Manufacturing industries and mining", "2014", 11.65);
		model.setValue("Manufacturing industries and mining", "2015", 11.96);
		model.setValue("Manufacturing industries and mining", "2016", 11.59);
		model.setValue("Manufacturing industries and mining", "2017", 11.94);
		model.setValue("Manufacturing industries and mining", "2018", 11.96);
		model.setValue("Manufacturing industries and mining", "2019", 11.59);
		model.setValue("Manufacturing industries and mining", "2020", 11.42);
		model.setValue("Manufacturing industries and mining", "2021", 11.76);
		model.setValue("Road traffic", "2010", 10.00);
		model.setValue("Road traffic", "2011", 9.93);
		model.setValue("Road traffic", "2012", 9.97);
		model.setValue("Road traffic", "2013", 10.01);
		model.setValue("Road traffic", "2014", 10.23);
		model.setValue("Road traffic", "2015", 10.26);
		model.setValue("Road traffic", "2016", 10.00);
		model.setValue("Road traffic", "2017", 9.12);
		model.setValue("Road traffic", "2018", 9.36);
		model.setValue("Road traffic", "2019", 8.72);
		model.setValue("Road traffic", "2020", 8.38);
		model.setValue("Road traffic", "2021", 8.69);
		model.setValue("Agriculture", "2010", 4.35);
		model.setValue("Agriculture", "2011", 4.32);
		model.setValue("Agriculture", "2012", 4.34);
		model.setValue("Agriculture", "2013", 4.39);
		model.setValue("Agriculture", "2014", 4.46);
		model.setValue("Agriculture", "2015", 4.52);
		model.setValue("Agriculture", "2016", 4.58);
		model.setValue("Agriculture", "2017", 4.55);
		model.setValue("Agriculture", "2018", 4.53);
		model.setValue("Agriculture", "2019", 4.51);
		model.setValue("Agriculture", "2020", 4.49);
		model.setValue("Agriculture", "2021", 4.57);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}