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



<window apply="demo.bar.ColumnRangeComposer"> 
	<charts id="chart" type="columnrange" inverted="true"
		title="Temperature variation by month"/>
</window>

package demo.bar;

import org.zkoss.chart.Charts;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class ColumnRangeComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

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

		chart.getAccessibility().setDescription("Image description: A column range chart compares the monthly temperature variations throughout 2017 in Vik I Sogn, Norway. The chart is interactive and displays the temperature range for each month when hovering over the data. The temperature is measured in degrees Celsius on the X-axis and the months are plotted on the Y-axis. The lowest temperature is recorded in March at minus 10.2 Celsius. The lowest range of temperatures is found in December ranging from a low of minus 9 to a high of 8.6 Celsius. The highest temperature is found in July at 26.2 Celsius. July also has the highest range of temperatures from 6 to 26.2 Celsius. The broadest range of temperatures is found in May ranging from a low of minus 0.6 to a high of 23.1 Celsius.");

		chart.setSubtitle("Observed in Vik i Sogn, Norway, 2021 | " +
				"Source: <a href=\"https://www.vikjavev.no/ver/\" target=\"_blank\">Vikjavev</a>");

		chart.setModel(ColumnRangeData.getXYModel());
		
		chart.getXAxis().setCategories(ColumnRangeData.getCategories());
		
		chart.getYAxis().setTitle("Temperature ( °C )");
		
		chart.getTooltip().setValueSuffix("°C");
		
		DataLabels dataLabels = chart.getPlotOptions().getColumnRange().getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormat("{y}°C");
		
		chart.getLegend().setEnabled(false);
	}
}

package demo.bar;

import org.zkoss.chart.model.DefaultXYModel;
import org.zkoss.chart.model.XYModel;


public class ColumnRangeData {
	private static final XYModel model;
	static {
		model = new DefaultXYModel();
		model.setAutoSort(false);
		model.addValue("Temperatures", -13.9, 5.2);
		model.addValue("Temperatures", -16.7, 10.6);
		model.addValue("Temperatures", -4.7, 11.6);
		model.addValue("Temperatures", -4.4, 16.8);
		model.addValue("Temperatures", -2.1, 27.2);
		model.addValue("Temperatures", 5.9, 29.4);
		model.addValue("Temperatures", 6.5, 29.1);
		model.addValue("Temperatures", 4.7, 25.4);
		model.addValue("Temperatures", 4.3, 21.6);
		model.addValue("Temperatures", -3.5, 15.1);
		model.addValue("Temperatures", -9.8, 12.5);
		model.addValue("Temperatures", -11.5, 8.4);
	}
	
	public static XYModel getXYModel() {
		return model;
	}
	
	public static String[] getCategories() {
		return new String[] {"Jan", "Feb", "Mar", "Apr",
				"May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"};
	}
}