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



<window apply="demo.bar.ColumnRotatedLabelsComposer">
	<charts id="chart" type="column" title="World's largest cities per 2014"
		subtitle="Source: &lt;a href=&quot;https://en.wikipedia.org/wiki/List_of_cities_proper_by_population&quot;&gt;Wikipedia&lt;/a&gt;" />
</window>

package demo.bar;

import org.zkoss.chart.AxisLabels;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Theme;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class ColumnRotatedLabelsComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
	
		chart.setModel(ColumnRotatedLabelsData.getCategoryModel());
		
		AxisLabels xLabels = chart.getXAxis().getLabels();
		xLabels.setRotation(-45);
		xLabels.setStyle("fontSize: '13px'; fontFamily: 'Verdana, sans-serif'");
		
		chart.getYAxis().setMin(0);
		chart.getYAxis().setTitle("Population (millions)");
		
		chart.getLegend().setEnabled(false);
		
		chart.getTooltip().setPointFormat(
			"Population in 2014: <b>{point.y:.1f} millions</b>");
		
		DataLabels dataLabels = chart.getSeries().getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setRotation(-90);
		dataLabels.setColor("#FFFFFF");
		dataLabels.setAlign("right");
		dataLabels.setFormat("{point.y:.1f}");
		dataLabels.setY(10);
		dataLabels.setStyle(
			"fontSize: '13px'; fontFamily: 'Verdana, sans-serif';");
		
		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				Theme theme = chart.getTheme();
				if (theme.equals(Theme.DARK_BLUE) || theme.equals(Theme.DARK_GREEN)) {
					chart.getSeries().getDataLabels().setColor("brown");
				} else {
					chart.getSeries().getDataLabels().setColor("#FFFFFF");
				}
	    	}
		});
	}
}

package demo.bar;

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



public class ColumnRotatedLabelsData {
	private static CategoryModel model;
	static {
		model = new DefaultCategoryModel();
		model.setValue("Population", "Shanghai", 23.7);
		model.setValue("Population", "Lagos", 16.1);
		model.setValue("Population", "Instanbul", 14.2);
		model.setValue("Population", "Karachi", 14.0);
		model.setValue("Population", "Mumbai", 12.5);
		model.setValue("Population", "Moscow", 12.1);
		model.setValue("Population", "São Paulo", 11.8);
		model.setValue("Population", "Beijing", 11.7);
		model.setValue("Population", "Guangzhou", 11.1);
		model.setValue("Population", "Delhi", 11.1);
		model.setValue("Population", "Shenzhen", 10.5);
		model.setValue("Population", "Seoul", 10.4);
		model.setValue("Population", "Jakarta", 10.0);
		model.setValue("Population", "Kinshasa", 9.3);
		model.setValue("Population", "Tianjin", 9.3);
		model.setValue("Population", "Tokyo", 9.0);
		model.setValue("Population", "Cairo", 8.9);
		model.setValue("Population", "Dhaka", 8.9);
		model.setValue("Population", "Mexico City", 8.9);
		model.setValue("Population", "Lima", 8.9);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}