Jump to content

JSignage:Graph:Axis styling attributes

From SpinetiX Wiki

This page is related to axis styling attributes of jSignage Graph API.

Continuous axis styling object

The customization of a continuous axis is done through a styling object (Plain Object) that contains any of the following attributes:

  • axis, direction, gridlines, textPlacement, textStyle, tickMarks
    Common axis styling attributes to both types of axes.
  • baseline
    Type: Number.
    Position of the baseline. Must be between minValue and maxValue. The default value is calculated as:
    • 0 if minValue is negative and maxValue is positive.
    • minValue if minValue is positive.
    • maxValue if maxValue is negative.
  • baselineStrokeStyle
    Type: Plain Object.
    Stroke styling object to override the baselineStrokeStyle of the chart.
    If set to null, the drawing of the baseline is disabled.
  • format
    Type: String. Default: The default decimal number format of the locale, or the default percentage format whichever is appropriate for the chart type.
    Pattern string used to format the value next to tick marks into text as following: '' for decimal, 'E' for scientific, '%' for percent, '$' for currency or an explicit number format pattern.
    The locale parameter of the chart controls which locale is used together with the pattern; if not provided, then the global jSignage locale is used.
  • maxValue
    Type: Number. Default: Chosen automatically according to the source data.
    Value mapping to the end of the axis line.
  • minValue
    Type: Number. Default: Chosen automatically according to the source data.
    Value mapping to the start of the axis line.
  • minorGridlines
    Type: Boolean or Plain Object.
    Controls if minor gridlines are drawn.
    If set to false or null, minor gridlines are not drawn.
    If set to true, minor gridlines are drawn according to the default parameters below.
    If an object is provided, the following properties are used:
    • count
      Type: Number.
      Number of minor gridlines between each major gridline.
      Default: 4.
    • strokeStyle
      Type: Plain Object.
      Stroke styling object to override the default style consisting of the stroke style used for major gridlines with half the line width.
  • minorTickMarks
    Type: Boolean or Plain Object.
    Controls if minor tick marks are drawn between major tick marks.
    If set to false or null, minor tick marks are not drawn.
    If set to true, minor tick marks are drawn according to the default parameters below.
    If an object is provided, the following properties are used:
    • count
      Type: Number.
      Number of minor tick marks between each major tick mark.
    • length
      Type: Number. Default: half the length or major tick marks.
      Length in pixel of the minor mark. Not that if placement is across, the actual length will be double.
    • strokeStyle
      Type: Plain Object.
      Stroke styling object as an override to the stroke style used for major tick marks.
  • tickInterval
    Type: Number or String. Default: 'medium'.
    Control the interval between ticks. The ticks are placed at regular locations on each side of the baseline. Instead of a number, the following value can be used to let jSignage.Graph choose the tick interval automatically:
    • 'small' Choose the interval so that between 6 and 8 ticks are used.
    • 'medium' Choose the interval so that between 4 and 6 ticks are used.
    • 'large' Choose the interval so that between 3 and 4 ticks are used.
    • 'max' Position a tick on the baseline, one at minValue and one at maxValue.
  • ticks
    Type: Array.<Number or Plain Object>.
    Optional array of tick positions that override the tickInterval parameter. Each element of the array is either a value at which to position a tick or an object with the following properties:
    • v: The tick value.
    • f: The text attached to the tick. If not provided, format is used to transform the tick value into the tick text. Added in 3.2.0 release.

Discrete axis styling object

The customization of a continuous axis is done through a styling object (Plain Object) that contains any of the following attributes:

  • axis, direction, gridlines, textPlacement, textStyle, tickMarks
    Common axis styling attributes to both types of axes.
  • categories
    Type: Array.<String>.
    Array of strings representing the label at the different discrete positions along the axis. The length of the array determines the number of ticks on the axis.

Common axis styling attributes

The following attributes are common to both types of axes:

  • axis
    Type: Boolean or Plain Object.
    Controls if the axis line is drawn.
    If set to false or null, the axis line is not drawn. Ticks marks are disabled as well, but text and gridlines are still available.
    If set to true, the axis line is drawn according to the axisStrokeStyle parameter of the chart.
    If an object is provided, the following property is used:
  • direction
    Type: Number. Default: 1.
    Controls the direction along the axis line.
    If the axis is horizontal, 1 stands for left to right, -1 for right to left.
    If the axis is vertical, 1 stands for bottom to top, -1 for top to bottom.
  • gridlines
    Type: Boolean or Plain Object.
    Controls if gridlines are drawn.
    If set to false or null no gridline is drawn.
    If set to true, gridlines are drawn according to the gridlineStrokeStyle attribute of the chart.
    If an object is provided, the following property is used:
  • textPlacement
    Type: String.
    Where to put the text next to each tick. The following values are accepted:
    • 'none': Do not display text next to the tick marks.
    • 'outside': Text is centered on the tick mark or gridline on the outer side of the axis line.
    • 'inside': Text is centered on the tick mark on the inner side of the axis line.
    • 'above': Text is above the gridline on the inner side of the axis line.
    • 'below': Text is below the gridline on the inner side of the axis line.
  • textStyle
    Type: Plain Object.
    Text styling object to override the default text style of the chart.
  • tickMarks
    Type: Boolean or Plain Object.
    Controls if tick marks are drawn.
    If set to false or null, tick marks are not drawn. This disables minor tick marks as well.
    If set to true, tick marks are drawn according to the default parameters below.
    If an object is provided, the following properties are used:
    • placement
      Type: String.
      One of 'inside', 'outside' or 'across'.
    • length
      Type: Number. Default: half the font size.
      Length in pixel of the mark. Not that if placement is across, the actual length will be double.
    • strokeStyle
      Type: Plain Object.
      Stroke styling object to override the stroke style used for the axis line.
Retrieved from "https://support.spinetix.com/w/index.php?title=JSignage:Graph:Axis_styling_attributes&oldid=9928"