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



<window apply="demo.area.AreaInvertedComposer">
	<charts id="chart" type="area" inverted="true" 
		title="Alibaba and Meta (Facebook) revenue"/>
</window>

package demo.area;

import java.util.Map;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Series;
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 AreaInvertedComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

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

		chart.getAccessibility().getKeyboardNavigation().getSeriesNavigation().setMode("serialize");

		int seriesIndex = 0;
		for (Map.Entry<String, Double[]> data : AreaInvertedData.getData().entrySet()) {
			Series series = chart.getSeries(seriesIndex++);
			series.setName(data.getKey());
			series.setData(data.getValue());
		}

		chart.getTooltip().setPointFormat("&#8226; {series.name}: <b>${point.y} B</b>");

		Legend legend = chart.getLegend();
		legend.setLayout("vertical");
		legend.setAlign("right");
		legend.setVerticalAlign("top");
		legend.setX(-150);
		legend.setY(100);
		legend.setFloating(true);
		legend.setBorderWidth(1);
		legend.setBackgroundColor("#FFFFFF");
		
		YAxis yAxis = chart.getYAxis();
		yAxis.setTitle("Revenue (billions USD)");
		yAxis.getLabels().setFormat("${text}");

		chart.getPlotOptions().getSeries().setPointStart(2014);
		chart.getPlotOptions().getArea().setFillOpacity(0.5);
	}
}

package demo.area;

import java.util.LinkedHashMap;
import java.util.Map;

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



public class AreaInvertedData {
	private final static Map<String, Double[]> data;
	
	static {
		data = new LinkedHashMap<>();
		data.put("Alibaba", new Double[] {
				11.44, 14.89, 21.40, 34.03, 51.52, 70.49, 94.46, 129.44
		});
		data.put("Meta (Facebook)", new Double[] {
				11.49, 17.08, 26.88, 39.94, 55.01, 69.65, 84.17, 117.93
		});
	}

	public static Map<String, Double[]> getData() {
		return data;
	}
}