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



<window apply="demo.bar.BarNegativeStackComposer">
	<charts id="chart" type="bar"
		title="Population pyramid for Somalia, 2021" />
</window>

package demo.bar;

import org.zkoss.chart.AxisAccessibility;
import org.zkoss.chart.Charts;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.json.JavaScriptValue;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class BarNegativeStackComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

    public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.setSubtitle("Source: <a " +
				"href=\"https://countryeconomy.com/demography/population-structure/somalia\"" +
				"target=\"_blank\">countryeconomy.com</a>");

		chart.getAccessibility().getPoint().setValueDescriptionFormat("{index}. Age {xDescription}, {value}%.");

		chart.setModel(BarNegativeStackData.getCategoryModel());

		XAxis xAxis = chart.getXAxis();
		xAxis.setReversed(false);
		xAxis.getLabels().setStep(1);
		xAxis.getAccessibility().setDescription("Age (male)");
	
		// mirror axis on right side
		XAxis minorAxis = chart.getXAxis(1);
		minorAxis.setOpposite(true);
		minorAxis.setReversed(false);
		minorAxis.setLinkedTo(0);
		minorAxis.getLabels().setStep(1);
		minorAxis.getAccessibility().setDescription("Age (female)");
		minorAxis.setCategories(BarNegativeStackData.getCategories());
	
		YAxis yAxis = chart.getYAxis();
		yAxis.setTitle("");
		yAxis.getLabels().setFormatter(new JavaScriptValue("function() {return Math.abs(this.value) + '%';}"));
		AxisAccessibility yAxisAccessibility = yAxis.getAccessibility();
		yAxisAccessibility.setDescription("Percentage population");
		yAxisAccessibility.setRangeDescription("Range: 0 to 5%");


		chart.getPlotOptions().getSeries().setStacking("normal");
		
		chart.getTooltip().setFormatter(new JavaScriptValue("function() { return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 1) + '%';}"));
    }
}

package demo.bar;

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



public class BarNegativeStackData {
	private static CategoryModel model;
	static {
		model = new DefaultCategoryModel();
		model.setValue("Male", "0-4", -8.98);
		model.setValue("Male", "5-9", -7.52);
		model.setValue("Male", "10-14", -6.65);
		model.setValue("Male", "15-19", -5.72);
		model.setValue("Male", "20-24", -4.85);
		model.setValue("Male", "25-29", -3.71);
		model.setValue("Male", "30-34", -2.76);
		model.setValue("Male", "35-40", -2.07);
		model.setValue("Male", "40-45", -1.70);
		model.setValue("Male", "45-49", -1.47);
		model.setValue("Male", "50-54", -1.22);
		model.setValue("Male", "55-59", -0.99);
		model.setValue("Male", "60-64", -0.81);
		model.setValue("Male", "65-69", -0.62);
		model.setValue("Male", "70-74", -0.41);
		model.setValue("Male", "75-79", -0.23);
		model.setValue("Male", "80+", -0.15);
		model.setValue("Female", "0-4", 8.84);
		model.setValue("Female", "5-9", 7.42);
		model.setValue("Female", "10-14", 6.57);
		model.setValue("Female", "15-19", 5.68);
		model.setValue("Female", "20-24", 4.83);
		model.setValue("Female", "25-29", 3.74);
		model.setValue("Female", "30-34", 2.80);
		model.setValue("Female", "35-40", 2.14);
		model.setValue("Female", "40-45", 1.79);
		model.setValue("Female", "45-49", 1.59);
		model.setValue("Female", "50-54", 1.34);
		model.setValue("Female", "55-59", 1.06);
		model.setValue("Female", "60-64", 0.83);
		model.setValue("Female", "65-69", 0.63);
		model.setValue("Female", "70-74", 0.43);
		model.setValue("Female", "75-79", 0.25);
		model.setValue("Female", "80+", 0.19);
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
	
	public static String[] getCategories() {
		return model.getCategories().toArray(new String[0]);
	}
}