Quick Start

Add a chart to your GWT app in 5 minutes.

Here's how to get started:
  1. Download the GWT Highcharts release jar file, and add it to your project's class path. E.g.:
  2. Download the Highcharts Library zip file, unzip it, and copy the contents of its "js" directory into your own projects Javascript source directory. If you're using jQuery in your project, then the only file you really need is the following (see the docs if you're using an alternate framework):
  3. Update your page that includes your GWT module to include the Highcharts library as well as jQuery (or whatever other required JS framework you're using):
    <script type="text/javascript"
    <script type="text/javascript" src="js/highcharts.js"></script>
  4. Update your GWT module XML configuration file to import the GWT Highcharts module:
    <inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>
  5. Within your GWT application, create a "Chart" widget, and set some configuration options using method chaining:
    Chart chart = new Chart()
       .setChartTitleText("Lawn Tunnels")
  6. Create a series, configure it, set the raw data, and add the series to the chart:
    Series series = chart.createSeries()
       .setName("Moles per Yard")
       .setPoints(new Number[] { 163, 203, 276, 408, 547, 729, 628 });
  7. Add the chart widget to any GWT layout container:
  8. Run the application, and enjoy your new chart! Then, go checkout the showcase examples and use the "View Source" button to get ideas on how to use the API further.
GWT charting visualizations.
See what it can do.
Get the library or source.
The one pager.
It's free, but check this.
Learn how to use it.
The nitty gritty.
Suggest an idea, get answers.
Support This Project
Show your support by making a donation!