[charts] AngularGauge cannot be scaled

Flow
1

I tried to decrease the size of an AngularGauge like so:

[code]
public class MyLayout extends VerticalLayout
{
public MyClass() {
this.setMargin(false);
this.setWidth(“150px”);
this.setHeight(“100px”);

    final Chart chart = new Chart();
    chart.setPrimaryStyleName("angularGauge");
    chart.setWidth("150px");
    chart.setHeight("100px");
    ...
}

}
[/code]and I get a very small chart, even though the correct size is set on the chart element in HTML:

<div class="angularGauge v-has-width v-has-height" style="width: 150px; height: 100px;" data-highcharts-chart="0">

How can I scale an AngularGauge?

32801.png

2

It created a porject with similar code as yours to test it out, and I was able to reproduce the problem. Let me guess, you have this code there somewhere?

configuration.setTitle(""); I was able to get the same look when I just emptied the title like that. It means that the title is there, the content is just empty. On the chart area, title has a fixed size which does not automatically scale with chart size. It reserves the space needed to the title, and then gives the rest avaialable space to the chart. When you go to these small sizes, the title will take everything and the chart becomes essentially zero height.

Instead of putting the content empty with “”, you can remove it completely from the chart by putting in null there.

configuration.setTitle((String)null);
[/code]Then the chart takes all the space. You need the cast because there are two different parameters that you can give into setTitle().

Here's how it looks
[img]
https://image.ibb.co/mEOwt5/small_angular_chart.png
[/img]

And here is my code.[code]
@Theme("mytheme")
public class MyUI extends UI {
  @Override protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();
    final Chart chart = new Chart();
    chart.setWidth("150px");
    chart.setHeight("100px");
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.setSeries(new ListSeries("Value",5));
    configuration.setTitle((String) null); 
    layout.addComponent(chart);
    setContent(layout);
  }

  @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
  @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
  public static class MyUIServlet extends VaadinServlet { }
}