CODEWITHSUNDEEP
javagwt
user2739823
user2739823

Reputation: 407

GWT BarChart how to reduce space between bars and remove start line

In my project I use GWT charts - 

   <inherits name="com.googlecode.gwt.charts.Charts"/>

I want to remove vertical line from where all bars starts and also to reduce the space between bars. Is it possible? I have tried several times but I haven't got a success. Here is my java code:

  BarChart chart = new BarChart();

  BarChartOptions opt = BarChartOptions.create();
  opt.setEnableInteractivity(true);
  opt.setTitle("Statistic");


  DataTable dataTable = DataTable.create();
  dataTable.addColumn(ColumnType.STRING, "Name");
  dataTable.addColumn(ColumnType.NUMBER, "Stocks!");
  dataTable.addRows(3);

  dataTable.setValue(0, 0, "Units");
  dataTable.setValue(1, 0, "Stock");
  dataTable.setValue(2, 0, "Invoices");

  dataTable.setValue(0, 1, 743644);
  dataTable.setValue(1, 1, 22628);
  dataTable.setValue(2, 1, 10);

  // Draw the chart
  chart.draw(dataTable, opt);

Barchart

I found the way to reduce the size between bars with this:
  ChartArea chartArea = ChartArea.create();
  chartArea.setHeight(50);
  opt.setChartArea(chartArea);

Upvotes: 2

Views: 374

Answers (1)

SteveMellross
SteveMellross

Reputation: 3473

Removing Vertical Axis Line

You can only remove the vertical axis bar by setting it to the same color as the background. In this case, white:

AxisOptions hAxisOptions = AxisOptions.create();
hAxisOptions.setBaselineColor("#FFF");

opt.setHAxisOptions(hAxisOptions);

enter image description here

If you also want to remove the grid lines, set them to the background color as well since the minimum number grid lines you can specify is 2:

opt.setGridlineColor("#FFF");

enter image description here

If you want the axis line to look the same as a grid line simple set them both to the same color:

AxisOptions hAxisOptions = AxisOptions.create();
hAxisOptions.setBaselineColor("#CCC");
opt.setGridlineColor("#CCC");

opt.setHAxisOptions(hAxisOptions);

enter image description here

You can check the Google Charts documentation here specifying all the possible bar chart options to verify this is the only way to achieve the desired effect. It is not simply a limitation of the GWT Visualization API.

Reducing Space Between Bars

This doesn't seem to be supported directly by the GWT Visualization API but it is supported by Google Charts. With the addition of a native JavaScript method you can get around this limitation.

First, extend the com.google.gwt.visualization.client.visualizations.corechart.Options class to include the native method:

public class BarChartOptions extends Options {
    protected BarChartOptions() {
    }

    public final native void setGroupWidth(String groupWidth) /*-{
        this.bar = { groupWidth: groupWidth }
    }-*/;

    public static BarChartOptions create() {
        return JavaScriptObject.createObject().cast();
    }
}

The new setGroupWidth method will now allow you to specify the bar width as a string percentage. E.g. "95%".

BarChartOptions opts = BarChartOptions.create();
opts.setGroupWidth("95%");
// Set other chart options here

// E.g. Removing the axis line
AxisOptions axisOptions = AxisOptions.create();
axisOptions.setBaselineColor("#FFF");
opts.setHAxisOptions(axisOptions);

enter image description here

Upvotes: 2

Related Questions