Skip to main content

Spider Chart

Data​

Data Source​

SDD with a list of values for the spider chart. The SDD requires the data keys to be defined.

Series Type​

Type of available series config:

  • Auto (automatically generates series based on the provided series key)
  • Manual (manually select which data to extract)

X Axis Key​

The name of the property to use for determining the line's X axis value. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Y Axis Key​

The name of the property to use for determining the line's Y axis value. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Series Key​

The name of the property to use for determining the line's series. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

ID Key​

(optional)

The name of the property to use for determining the ID for each data point. IDs are necessary for point selection.

Color Override Key​

(optional)

The key to use to extract custom colors from data. If the specified key or the value defined by the key is undefined then the color is generated automatically.

Aggregation Method​

Component level data aggregation method that determines how should the data be aggregated in case there are more than one values with the same X and Y axis values.

The available options are:

  • None
  • Sum
  • Average
  • Median

Series Config​

A list of custom series. Only shown if the series type is Manual. Has the following properties:

X Axis Key​

The name of the property to use for determining the x-axis value.

Y Axis Key​

The name of the property to use for determining the y-axis value.

Chart Type​

The type of the chart. The supported type are:

  • Line
  • Column

Line Width​

Custom line width for the series.

Only shown if the Chart Type is set to Line.

Color​

(optional)

fixed color override of the points of the manual series.

Dash Style​

The style of the line for the manual series.

Only shown if the Chart Type is set to Line.

Marker Enabled​

The name of the property to use for determining the category of the point. Only shown if the data is linked to custom SDD.

Marker Symbol​

The name of the property to use for changing marker symbol for the series.

Manual Series Example

Marker Size​

The name of the property to set proper marker size for the series.

Display Options​

Chart Type​

The type of the chart. The supported type are:

  • Line
  • Column

Line Width​

Custom line width for the series.

Only shown if the Chart Type is set to Line.

Dash Style​

The style of the line for the manual series.

Only shown if the Chart Type is set to Line.

Marker Enabled​

The name of the property to use for determining the category of the point. Only shown if the data is linked to custom SDD.

Marker Symbol​

The name of the property to use for changing marker symbol for the series.

Marker Size​

The name of the property to set proper marker size for the series.

Hide Markers​

Should the markers be shown or not.

Pan And Zoom​

Enable pan and zoom for numeric axis. To zoom, click and hold the left mouse button. To pan, press the "shift" key and drag on the chart.

Animation​

Enabled​

Should animation be enabled or not.

Duration​

Duration of chart animations (400 milliseconds by default).

Categorical / Value Axis​

Tick Format​

Axis value (tick) formatting available if the axis type is numeric.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Font Size​

Data label font size.

  • Small
  • Medium
  • Large

Ticks Label Visible​

Should the ticks labels be shown or not.

Title​

(optional)

Title to display on the axis.

Type​

The type of the axis values. The available options are:

  • Linear numeric values that support numeric formatting
  • Logarithmic logarithmic axis values that support numeric formatting
  • Datetime date values that support date-time formatting based on date-fns library formatting
  • Category text values

For date-time type standard conventions can be used. For example the 2021-05-19 can be formatted with the pattern dd/MM/yyyy to show up as 19/05/2021.

For more date-time formats please refer to https://date-fns.org/v2.21.1/docs/format.

Enabled​

Should the axis values be shown or not.

Plot Lines​

Display a line perpendicular to the axis. Multiple lines can be displayed. As an example:

[
  {
    "value": 1,
    "width": 3,
    "color": "green",
    "dashStyle": "solid",
    "label": "Limit"
  }
]

Caption​

Text​

Specify text to display as a caption below the chart.

Data Labels​

Enabled​

Should data labels for the chart series be shown.

Legend​

Enabled​

A flag specifying whether the legend should be displayed in the chart.

Orientation​

(optional)

Defines the way in which legend items are laid out within the available space. Available options:

  • horizontal
  • vertical

Defaults to horizontal

Horizontal Alignment​

(optional)

Defines where the legend sits along the horizontal plane. Available options:

  • Left
  • Center
  • Right

Defaults to center

Vertical Alignment​

(optional)

Defines where the legend sits along the vertical plane. Available options:

  • top
  • middle
  • bottom

Defaults to bottom

Pane​

Background​

An object, or array of objects, for backgrounds. Sub options include backgroundColor (which can be solid or gradient),innerWidth, outerWidth, borderWidth, borderColor.

Example:

{
    "linearGradient": {
        "x1": 0,
        "y1": 0,
        "x2": 0,
        "y2": 1
    },
    "stops": [
        [0, "#ffffff"],
        [1, "#e6e6e6"]
    ]
}.

Center​

The center of the polar chart, given as an array of [x, y] positions. Positions can be given as integers that transform to pixels, or as percentages of the plot area size. Defaults to ['50%', '50%']

Inner Size Type​

Defines the type of inner size unit

  • Percentage
  • Pixel

Inner Size​

The inner size of the pane, either as a number defining pixels, or a percentage defining a percentage of the pane's size.

Defaults to 0%.

Size Type​

Defines the type of inner size unit

  • Percentage
  • Pixel

Size​

The size of the pane, either as a number defining pixels, or a percentage defining a percentage of the available plot area (the smallest of the plot height or plot width).

Defaults to 85%.

Start Angle​

The start angle of the polar X axis or gauge axis, given in degrees where 0 is north. Defaults to 0.

Defaults to 0.

End Angle​

The end angle of the polar X axis or gauge value axis, given in degrees where 0 is north. Defaults to startAngle

Defaults to undefined.

Selection​

Type​

Options for point selection.

  • None (point selection is disabled)
  • Single (one point can be selected at a time)
  • Multi (multiple points can be selected at a time when holding down the shift key)

Selected Points​

Property that the user must like to in order to enabled point selection.

Colored​

Boolean value determining if the selected points should be colored or not.

Selected Point Color​

The color of the selected points.

Titles​

Chart Title​

(optional)

The title text to be displayed above the chart.

Chart Title Alignment​

(Optional)

How the title should be aligned. Supported values:

  • Left
  • Center
  • Right

Chart Subtitle Text​

(optional)

The subtitle text to be displayed above the chart.

Chart Subtitle Alignment​

(Optional)

How the title should be aligned. Supported values:

  • Left
  • Center
  • Right

Tooltips​

Enabled​

Enable or disable tooltips for all data points

Column Config​

Construct a custom tooltip by combining data from columns in the source data.

Column​

Column from the data source to display in the tooltip.

Label​

Alias to display instead of the column name.

Apply to all series​

Should this column tooltip be displayed for all series?

Applies To Series​

Which series should this tooltip schema apply to.

Prefix​

Tooltip prefix.

Suffix​

Tooltip suffix.

Multiplier​

Converts the value to the chosen multiplier. For example, the option "Thousands" would convert the value "1000" to "1k".

Decimal Points​

Decimal points to add to the number.

Capitalized multiplier​

Capitalizes the multiplier value.

Locale used​

Should the tooltip be formatted based on user locale?

Overlap Enabled​

Allow data labels to overlap if the is insufficient space.