Available theme variables

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:

Padding of chart elements

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” />

Title and Footer settings

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” />

Legend settings (See also legend documentation)

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” />

Tickmarks and sub-tickmarks

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” />

Value points, value bars

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” />

Axis settings

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” />

Available chart constants

These constants are available with every element in the chart:

Attributes inherent to the whole chart:

  • $canvasWidth, $chartWidth
    • Both describe the width of the whole canvas area in pixels.
  • $canvasHeight, $chartHeight
    • Both describe the height of the whole canvas area in pixels.
  • $px
    • Reciprocal value of the $chartWidth variable: 1/$chartWidth.
  • $py
    • Reciprocal value of the $chartHeight variable: 1/$chartHeight.
  • $chartShorterSide
    • Equals $chartHeight or $chartWidth, whichever of both values is lower.
  • $chartLongerSide
    • Equals $chartHeight or $chartWidth, whichever of both values is higher.
  • $pi
    • the mathematical contant Pi (3.14159265…)
  • $currentRenderingPlatform
    • TODO: Wie sieht hier der output aus?

Attributes inherent to the current element:

  • $x
    • X position of the element on the canvas in pixels.
  • $y
    • Y position of the element on the canvas in pixels.
  • $w
    • Width of the element in pixels.
  • $h
    • Height of the element in pixels.