Vaadin Charts – Put Title and Legend on same row?

Question

In Vaadin Charts 2, is there a way to get the Title and Legend to appear on the same row? I mean, can both appear above the chart, or both below the chart?

Putting them on the same horizontal line would save vertical space. Those saved pixels are even more precious when presenting multiple charts together on a page.

Answer 1

setVerticalAlign

You can get them nearly even on the same horizontal line by calling setVerticalAlign on the Legend itself. Use constants defined in the VerticalAlign enum.

final Configuration configuration = myChart.getConfiguration();
configuration.getLegend().setVerticalAlign( VerticalAlign.TOP );

Version 1 versus 2

Note that this positioning of the legend area changed between Vaadin Charts 1 and 2. To quote the doc (HighCharts in the engine behind Vaadin Charts):

In Highcharts 1.x versions the position of the legend area was determined by CSS. In 2.x, the position is determined by properties like align, verticalAlign, x and y, but the styles are still parsed for backwards compatibility.