The theme usually consists of a variables section (<variables>) and a chart options part (<chartOptions>). The variables part defines individual settings which change the layout of the chart.
Note: A lot of variables have the same functions as a chart options. In this case we recommend to use chart options for modifying your chart.
The following theme variables are available:
Name of theme variable | Function | Usage example |
---|---|---|
INNER_PADDING INNER_PADDING_[TOP | BOTTOM| LEFT| RIGHT] | Defines the distance of the chart elements from the chart border. | <variable name=“INNER_PADDING_LEFT” type=“size” value=“10” /> |
Name of theme variable | Function | Usage example |
---|---|---|
TITLE_PADDING TITLE_PADDING_[TOP | BOTTOM| LEFT| RIGHT] | Controls the padding around the title element | <variable name=“TITLE_PADDING_TOP” type=“size” value=“10” /> |
TITLE_IMAGE_PADDING | Controls the padding between title and title image | <variable name=“TITLE_IMAGE_PADDING” type=“size” value=“15” /> |
FOOTER_PADDING FOOTER_PADDING_[TOP | BOTTOM| LEFT| RIGHT] | Controls the padding around the footer element | <variable name=“FOOTER_PADDING_BOTTOM” type=“size” value=“10” /> |
FOOTER_POSITION | Places the footer inside or outside of chart background | <variable name=“FOOTER_POSITION” type=“string” value=“outside” /> |
Name of theme variable | Function | Usage example |
---|---|---|
LEGEND_AXIS_PADDING | Padding between legend and the nearest axis element | <variable name=“TITLE_IMAGE_PADDING” type=“size” value=“min:5; default: 0.03 * $chartWidth; max:50” /> |
LEGEND_WIDTH | Width of the legend. If this is not set legend width will be based on width of the legend content | <variable name=“LEGEND_WIDTH” type=“size” value=“150” /> |
LEGEND_HEIGHT | Height of the legend. If this is not set legend height will be based on height of the legend content | <variable name=“LEGEND_HEIGHT” type=“size” value=“400” /> |
LEGEND_PADDING LEGEND_PADDING_[TOP | BOTTOM| LEFT| RIGHT] | Controls the inner padding of the legend | <variable name=“LEGEND_PADDING_TOP” type=“size” value=“20” /> |
LEGEND_PADDING_HEADER | Padding between legend header and legend symbols / value set titles | <variable name=“LEGEND_PADDING_HEADER” type=“size” value=“10” /> |
LEGEND_PADDING_FOOTER | Padding between legend symbols / value set titles and legend footer | <variable name=“LEGEND_PADDING_FOOTER” type=“size” value=“10” /> |
LEGEND_VERTICAL_ALIGNMENT | Controls vertical alignment of the legend within the chart. Accepted values: TOP, MIDDLE, BOTTOM | <variable name=“LEGEND_VERTICAL_ALIGNMENT” type=“string” value=“TOP” /> |
LEGEND_SYMBOL_MARGIN LEGEND_SYMBOL_MARGIN_[TOP | BOTTOM| LEFT| RIGHT] | Margin of the legend symbols | <variable name=“LEGEND_SYMBOL_MARGIN_RIGHT” type=“size” value=“5” /> |
Name of theme variable | Function | Usage example |
---|---|---|
HORIZONTAL_AXIS_TICKMARK_LENGTH | length of tickmarks on the horizontal axis | <variable name=“HORIZONTAL_AXIS_TICKMARK_LENGTH” type=“size” value=“10” /> |
VERTICAL_AXIS_TICKMARK_LENGTH | length of tickmarks on the vertical axis | <variable name=“VERTICAL_AXIS_TICKMARK_LENGTH” type=“size” value=“10” /> |
HORIZONTAL_AXIS_SUBTICKMARK_LENGTH | length of sub-tickmarks on the horizontal axis | <variable name=“HORIZONTAL_AXIS_SUBTICKMARK_LENGTH” type=“size” value=“5” /> |
VERTICAL_AXIS_SUBTICKMARK_LENGTH | length of sub-tickmarks on the vertical axis | <variable name=“HORIZONTAL_AXIS_SUBTICKMARK_LENGTH” type=“size” value=“5” /> |
Name of theme variable | Function | Usage example |
---|---|---|
VALUE_POINT_RADIUS | Size of value points | <variable name=“VALUE_POINT_RADIUS” type=“size” value=“7” /> |
VALUE_POINT_LINE_WIDTH | Width of the outline in value points | <variable name=“VALUE_POINT_LINE_WIDTH” type=“size” value=“1” /> |
VALUE_BAR_SIZE_PERCENTAGE | Ratio of the plot area width used for value bar width | <variable name=“VALUE_BAR_SIZE_PERCENTAGE” type=“size” value=“0.6” /> |
VALUE_BAR_SPACING_RATIO | Ratio between innerSpacings (gap between bars within a valueBar cluster) and spacings (gap between single valueBars or valueBar clusters). | <variable name=“VALUE_BAR_SPACING_RATIO” type=“size” value=“0.2” /> |
VALUE_BAR_AXIS_SPACING_START | Size of the spacing between the primary y-axis and the first valueBar. Overrides the automatically computed spacing and replaces it with the specified size in pixels. | <variable name=“VALUE_BAR_AXIS_SPACING_START” type=“size” value=“10” /> |
VALUE_BAR_AXIS_SPACING_END | Size of the spacing between the last valueBar and the secondary y-axis or the end of the plot area. Overrides the automatically computed spacing and replaces it with the specified size in pixels. | <variable name=“VALUE_BAR_AXIS_SPACING_END” type=“size” value=“10” /> |
Name of theme variable | Function | Usage example |
---|---|---|
AXIS_SIZE | Size of all axes | <variable name=“AXIS_SIZE” type=“size” value=“min:50; default: 0.15 * $chartWidth; max:100” /> |
AXIS_TOP_SIZE | Size of top axis | <variable name=“AXIS_TOP_SIZE” type=“size” value=“min:30; default: 0.1 * $chartWidth; max:75” /> |
AXIS_BOTTOM_SIZE | Size of bottom axis | <variable name=“AXIS_BOTTOM_SIZE” type=“size” value=“min:30; default: 0.1 * $chartWidth; max:75” /> |
AXIS_LEFT_SIZE | Size of left axis | <variable name=“AXIS_LEFT_SIZE” type=“size” value=“min:50; default: 0.15 * $chartWidth; max:100” /> |
AXIS_RIGHT_SIZE | Size of right axis | <variable name=“AXIS_RIGHT_SIZE” type=“size” value=“min:50; default: 0.15 * $chartWidth; max:100” /> |
AXIS_LABEL_ROTATION_TOP | Rotation of axis labels in the top axis in degrees | <variable name=“AXIS_LABEL_ROTATION_TOP” type=“size” value=“45” /> |
AXIS_LABEL_ROTATION_BOTTOM | Rotation of axis labels in the bottom axis in degrees | <variable name=“AXIS_LABEL_ROTATION_BOTTOM” type=“size” value=“45” /> |
AXIS_LABEL_ROTATION_LEFT | Rotation of axis labels in the left axis in degrees | <variable name=“AXIS_LABEL_ROTATION_LEFT” type=“size” value=“45” /> |
AXIS_LABEL_ROTATION_RIGHT | Rotation of axis labels in the right axis in degrees | <variable name=“AXIS_LABEL_ROTATION_RIGHT” type=“size” value=“45” /> |
These constants are available with every element in the chart: