In Vaadin Charts 2 (just released 2014-12), how can I style the title and subtitle of the charts?
The default font size is huge. I am showing multiple charts per layout, so I cannot afford so much space wasted on titling.
Is there some command or some CSS hooks for controlling the titles’ font size and margin/padding?
The various Theme controlling the look of the charts vary widely in their sizing. The new Valo themes (ValoLightTheme and ValoDarkTheme, matching Vaadin’s new Valo theme) tend to be much larger than the previous default, VaadinTheme (matching Vaadin’s Reindeer theme).
So one easy way to change sizes of chart labels is to switch themes. The theme is not set on the individual chart. Instead, use a global setting affecting all charts within a UI (a web browser’s particular window/tab/portlet). The ChartOptions class has a setTheme method.
ChartOptions.get().setTheme( new VaadinTheme() ); // All charts within a UI share the same Theme object.
Unless you have a specific need, I suggest putting that code in the init method of your UI subclass (such as MyVaadinUI in Vaadin projects created by Maven or the Vaadin Plugin for NetBeans/Eclipse).
Title Object > Style ObjectIn Vaadin Charts 2, the title and subtitle of the chart are represented by appropriately named objects, Title and Subtitle. Each has an optional Style object. That object has several settings correlating to the usual CSS properties, including:
So setting the font size is a matter of fetching:
Chart object > Configuration object > Title object > Style object
…and then passing a string value for text size to the setFontSize method.
Seems simple, but there is one catch. The Style object is optional. By default, it does not exist. In other words, the Style object is meant for you and I to override the already-defined internal formatting.
So you must first check for the Style object’s existence, and if null, instantiate it.
Example code using Vaadin 7.3.7 with the fresh new (as of 2014-12) Vaadin Charts 2 in Java 8.
final Configuration configuration = chart.getConfiguration(); // As per usual, interact with the chart via its Configuration object.
Title t = configuration.getTitle(); // Obtain the object representing the title (or Subtitle for subtitle).
if ( t.getStyle() == null ) { // If not yet existing…
t.setStyle( new Style() ); // Instantiate a Style object and install on the Title object.
}
Style st = t.getStyle(); // Obtain the Style object (whether new or pre-existing).
st.setFontSize( "0.5em" ); // Half an em is teeny-tiny, but demonstrates this approach works to change the font size.
To set the title’s alignment towards the left or right of the chart, no need for the Style object. The Title object itself has a setHorizontalAlignment method. Pass values defined by the HorizontalAlign enum for LEFT, CENTER, RIGHT.
final Configuration configuration = chart.getConfiguration(); // As per usual, interact with the chart via its Configuration object.
Title t = configuration.getTitle(); // Obtain the object representing the title (or Subtitle for subtitle).
t.setHorizontalAlign( HorizontalAlign.LEFT );
The legend is similar to Title. The Configuration contains a Legend object. The Legend contains a Style object.
Chart object > Configuration object > Legend object > Style object
The items (marker & series name) in a Legend have their own styling. To change the font or font size of those series names, access the items’ Style object. The catch is that there is no layer of "LegendItem" object. Instead of accessing such an object, call the Legend method getItemStyle
Chart object > Configuration object > Legend object >
getItemStylemethod