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



<window apply="demo.bar.ColumnRotatedLabelsComposer">
	<charts id="chart" type="column" title="World's largest cities per 2021"/>
</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.setSubtitle("Source: <a href=\"https://worldpopulationreview.com/world-cities\" target=\"_blank\">World Population Review</a>");
	
		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 2021: <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", "Tokyo", 37.33);
		model.setValue("Population", "Delhi", 31.18);
		model.setValue("Population", "Shanghai", 27.79);
		model.setValue("Population", "Sao Paulo", 22.23);
		model.setValue("Population", "Mexico City", 21.91);
		model.setValue("Population", "Dhaka", 21.74);
		model.setValue("Population", "Cairo", 21.32);
		model.setValue("Population", "Beijing", 20.89);
		model.setValue("Population", "Mumbai", 20.67);
		model.setValue("Population", "Osaka", 19.11);
		model.setValue("Population", "Karachi", 16.45);
		model.setValue("Population", "Chongqing", 16.38);
		model.setValue("Population", "Istanbul", 15.41);
		model.setValue("Population", "Buenos Aires", 15.25);
		model.setValue("Population", "Kolkata", 14.974);
		model.setValue("Population", "Kinshasa", 14.970);
		model.setValue("Population", "Lagos", 14.86);
		model.setValue("Population", "Manila", 14.16);
		model.setValue("Population", "Tianjin", 13.79);
		model.setValue("Population", "Guangzhou", 13.64);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}