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



<window apply="demo.more.WaterfallComposer">
	<charts id="chart" type="waterfall" title="Highcharts Waterfall" />
</window>

package demo.more;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.WaterfallPlotOptions;
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 WaterfallComposer extends SelectorComposer<Window> {
	@Wire Charts chart;

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

		chart.getXAxis().setType("category");

		chart.getYAxis().setTitle("USD");

		chart.getLegend().setEnabled(false);

		chart.getTooltip().setPointFormat("<b>${point.y:,.2f}</b> USD");

		String[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);

		Series series = chart.getSeries();
		WaterfallPlotOptions plotOptions = new WaterfallPlotOptions();
		plotOptions.setUpColor(themeColors[2]);
		plotOptions.setColor(themeColors[3]);
		series.setPlotOptions(plotOptions);

		series.addPoint("Start", 120000);
		series.addPoint("Product Revenue", 569000);
		series.addPoint("Service Revenue", 231000);
		Point interSum = new Point();
		interSum.setName("Positive Balance");
		interSum.setIntermediateSum(true);
		interSum.setColor(themeColors[1]);
		series.addPoint(interSum);
		series.addPoint("Fixed Costs", -342000);
		series.addPoint("Variable Costs", -233000);
		Point sum = new Point();
		sum.setName("Balance");
		sum.setSum(true);
		sum.setColor(themeColors[1]);
		series.addPoint(sum);

		DataLabels dataLabels = series.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormatter(new JavaScriptValue(
				"function () {\n"
				+ "		return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';\n"
				+ "}"));
		dataLabels.setStyle("fontWeight: 'bold';");
		chart.getPlotOptions().getWaterfall().setPointPadding(0);
	}
}