- GWT Highcharts Tutorial
- GWT Highcharts - Home
- GWT Highcharts - Overview
- Environment Setup
- Configuration Syntax
- GWT Highcharts - Line Charts
- GWT Highcharts - Area Charts
- GWT Highcharts - Bar Charts
- GWT Highcharts - Column Charts
- GWT Highcharts - Pie Charts
- GWT Highcharts - Scatter Chart
- GWT Highcharts - Dynamic Charts
- GWT Highcharts - Combinations
- GWT Highcharts - 3D Charts
- GWT Highcharts - Map Charts
- GWT Highcharts Useful Resources
- GWT Highcharts - Quick Guide
- GWT Highcharts - Useful Resources
- GWT Highcharts - Discussion
GWT Highcharts - Stacked Column Chart
Following is an example of a Stacked Column Chart.
We have already seen the configurations used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of a stacked column chart. We will also understand additional configuration.
plotOptions
Configure the stacking of the chart using plotOptions.series.stacking as "normal". Possible values are null which disables stacking, "normal" stacks by value and "percent" stacks the series by percentages.
chart.setSeriesPlotOptions(new SeriesPlotOptions() .setStacking(Stacking.NORMAL) )
Example
HelloWorld.java
package com.tutorialspoint.client; import org.moxieapps.gwt.highcharts.client.AxisTitle; import org.moxieapps.gwt.highcharts.client.Chart; import org.moxieapps.gwt.highcharts.client.Credits; import org.moxieapps.gwt.highcharts.client.Legend; import org.moxieapps.gwt.highcharts.client.Series.Type; import org.moxieapps.gwt.highcharts.client.ToolTip; import org.moxieapps.gwt.highcharts.client.ToolTipData; import org.moxieapps.gwt.highcharts.client.ToolTipFormatter; import org.moxieapps.gwt.highcharts.client.labels.DataLabels; import org.moxieapps.gwt.highcharts.client.plotOptions.ColumnPlotOptions; import org.moxieapps.gwt.highcharts.client.plotOptions.SeriesPlotOptions; import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Stacking; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootPanel; public class HelloWorld implements EntryPoint { public void onModuleLoad() { Chart chart = new Chart() .setType(Type.COLUMN) .setChartTitleText("Historic World Population by Region") .setChartSubtitleText("Source: Wikipedia.org") .setColumnPlotOptions(new ColumnPlotOptions() .setDataLabels(new DataLabels() .setEnabled(true) ) ) .setSeriesPlotOptions(new SeriesPlotOptions() .setStacking(Stacking.NORMAL) ) .setLegend(new Legend() .setBackgroundColor("#FFFFFF") .setReversed(true) ) .setCredits(new Credits() .setEnabled(false) ) .setToolTip(new ToolTip() .setFormatter(new ToolTipFormatter() { @Override public String format(ToolTipData toolTipData) { return toolTipData.getSeriesName() + ": " + toolTipData.getYAsLong() +" million"; } })); chart.getXAxis() .setCategories("Africa", "America", "Asia", "Europe", "Oceania"); chart.getYAxis() .setAxisTitle(new AxisTitle() .setText("Population (millions)") .setAlign(AxisTitle.Align.HIGH) ); chart.addSeries(chart.createSeries() .setName("Year 1800") .setPoints(new Number[] { 107, 31, 635, 203, 2 }) ); chart.addSeries(chart.createSeries() .setName("Year 1900") .setPoints(new Number[] { 133, 156, 947, 408, 6 }) ); chart.addSeries(chart.createSeries() .setName("Year 2008") .setPoints(new Number[] { 973, 914, 4054, 732, 34 }) ); RootPanel.get().add(chart); } }
Result
Verify the result.
gwt_highcharts_column_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google