- 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
Area Chart with inverted values
Following is an example of an area chart with inverted values.
We have already seen the configurations used to draw a chart in Highcharts Configuration Syntax chapter. Now, let us see an example of an Area Chart with inverted axes. We will also understand additional configuration and add inverted attribute in chart.
charts
Configure the inverted of the chart as true.
Configure the axes to be inverted. When true x axis is vertical and y axis is horizontal. If a bar series is present in the chart, the same will be inverted. Here, the default value is false.
chart.setInverted(true)
Example
HelloWorld.java
package com.tutorialspoint.client; import org.moxieapps.gwt.highcharts.client.Chart; import org.moxieapps.gwt.highcharts.client.ChartSubtitle; 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.Style; 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.AxisLabelsData; import org.moxieapps.gwt.highcharts.client.labels.AxisLabelsFormatter; import org.moxieapps.gwt.highcharts.client.labels.YAxisLabels; import org.moxieapps.gwt.highcharts.client.plotOptions.AreaPlotOptions; 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.AREA) .setInverted(true) .setChartTitleText("Average fruit consumption during one week") .setChartSubtitle(new ChartSubtitle() .setStyle(new Style() .setPosition("absolute") .setRight("0px") .setBottom("0px") ) ) .setLegend(new Legend() .setLayout(Legend.Layout.VERTICAL) .setAlign(Legend.Align.RIGHT) .setVerticalAlign(Legend.VerticalAlign.TOP) .setX(-150) .setY(100) .setFloating(true) .setBorderWidth(1) .setBackgroundColor("#FFFFFF") ) .setToolTip(new ToolTip() .setFormatter( new ToolTipFormatter() { public String format(ToolTipData toolTipData) { return "<b>" + toolTipData.getSeriesName() + "</b><br/>" + toolTipData.getXAsString() + ": " + toolTipData.getYAsLong(); } } ) ) .setCredits(new Credits() .setEnabled(false) ) .setAreaPlotOptions(new AreaPlotOptions() .setFillOpacity(0.5) ); chart.getXAxis() .setCategories( "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ); chart.getYAxis() .setAxisTitleText("Y-Axis") .setLabels(new YAxisLabels() .setFormatter(new AxisLabelsFormatter() { public String format(AxisLabelsData axisLabelsData) { return String.valueOf(axisLabelsData.getValueAsLong()); } }) ); chart.addSeries(chart.createSeries() .setName("John") .setPoints(new Number[] {3, 4, 3, 5, 4, 10, 12}) ); chart.addSeries(chart.createSeries() .setName("Jane") .setPoints(new Number[] {1, 3, 4, 3, 3, 5, 4}) ); RootPanel.get().add(chart); } }
Result
Verify the result.
gwt_highcharts_area_charts.htm
Advertisements