Vaadin 8 Chart remove excess space between plot and title

Question

I am using Vaadin 8 chart add-on to create gauges in a gridLayout as shown in the snapshot below. I am trying to remove excess spacing between chart and title area as highlighted in RED.

Code Snippet to create a gauge

private Chart gauge(Number newValue, String tooltip) {

    final Chart chart = new Chart();
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.getChart().setAlignTicks(false);
    configuration.getChart().setWidth(200);
    configuration.getChart().setHeight(200);
    configuration.getChart().setSpacingTop(0);
    configuration.getTitle().setMargin(0);
    configuration.getChart().setPlotBackgroundColor(SolidColor.GREENYELLOW);
    configuration.getChart().setPlotBackgroundImage(null);
    configuration.getChart().setPlotBorderWidth(0);
    configuration.getChart().setPlotShadow(false);
    configuration.getChart().setBackgroundColor(null);
    configuration.getChart().setMarginTop(0);
    configuration.getChart().setMarginBottom(0);

    configuration.getPane().setStartAngle(-150);
    configuration.getPane().setEndAngle(150);

    YAxis yAxis = new YAxis();
    // The limits are mandatory
    yAxis.setMin(0);
    yAxis.setMax(100);

    // Other configuration
    yAxis.getLabels().setStep(1);
    yAxis.setTickInterval(10);
    yAxis.setPlotBands(new PlotBand[] { new PlotBand(0, 40, SolidColor.GREEN),
            new PlotBand(40, 80, SolidColor.YELLOW), new PlotBand(80, 100, SolidColor.RED) });

    configuration.addyAxis(yAxis);

    final ListSeries series = new ListSeries(tooltip, 80);

    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    plotOptionsGauge.setDataLabels(new DataLabels());
    // plotOptionsGauge.getDataLabels()
    // .setFormatter("function() {return '<span style=\"color:#339\">'+
    // this.y + ' %</span>';}");

    plotOptionsGauge.setTooltip(new SeriesTooltip());
    plotOptionsGauge.getTooltip().setValueSuffix(" %");
    series.setPlotOptions(plotOptionsGauge);

    configuration.setSeries(series);

    series.updatePoint(0, newValue);

    chart.drawChart();

    return chart;
}

Any pointers on how to remove the excess space???

TIA

Answer 1

Have you tried reducing the spacing?

Most of the highcharts API calls can be used with vaadin-charts:

https://api.highcharts.com/highcharts/chart.spacing

spacing: Array.
Since 3.0.6

The distance between the outer edge of the chart and the content, like title or legend, or axis title and labels if present. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option.

Defaults to [10, 10, 15, 10].

Answer 2

Finally, found the solution after many tries. Adding the below line in the gauge worked for me and here is the snapshot of the results

configuration.getPane().setSize(95, Unit.PERCENTAGE);

Answer 3

I've found setting the title as floating helps, as then the plot calculations don't take the title into account:

yourchart.getConfiguration().getTitle().setFloating(true);