From Documentation

Jump to: navigation, search

  • Author
    Alain Galdemas & Zied Zaim @NGI Maghreb
  • Date
    November 19, 2012
  • Version
    Applicable to ZK 5.0 and later



The best way to graphically represent data is to draw charts. ZK supports a few type of charts based on JFreeChart library. In this small talk, I will introduce a new component - ZHighCharts, based on Highcharts JS library which offers an easy way for users to create modern and intuitive charts.


Here are some selected demos:


Spline w symbols.png

More demos are available here:

Component Usage

To create a chart, four steps are required:

  1. Add zhighcharts-0.2.0.jar to the directory WEB-INF/lib
  2. Add the ZHighCharts component to the ZUL file
  3. <zhighcharts id="chartComp" />
  4. Initialize and configure the component in the controller
  5. ZHighCharts chartComp;
    chartComp = (ZHighCharts) getFellow("chartComp");
    chartComp.setTitle("My first ZHighChart chart");
  6. Add some data
  7. SimpleExtXYModel dataChartModel = new SimpleExtXYModel();
    dataChartModel.addValue("Chart 1", 0, 7);
    dataChartModel.addValue("Chart 1", 1, 4);
    dataChartModel.addValue("Chart 1", 2, 9);
    dataChartModel.addValue("Chart 1", 3, 5);


    The ZHighCharts project is hosted on github here. To use ZHighCharts, a valid Highcharts license is required. Note that the use of Highcharts is free for non-profit organizations, students, universities, public schools and non-commercial personal websites. To use ZHighCharts for commercial services, a valid Highcharts license is required.

    More information are available here: Highcharts JS Licence.


    Highcharts JS is considered as one of the best charting libraries written in JavaScript. The ZHighCharts project aims to provide a pure Java approach to use Highcharts JS in ZK projects.


    Copyright © NGI Maghreb. This article is licensed under GNU Free Documentation License.
You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum