Skip to main content
Version: 8.3.2

Spider Chart

Spider Chart is generally used to compare multivariate quantitative data set. Each quantitative variable is represented on an axis starting from the same center point.

// Creation of SpiderChart
const lc = lightningChart()
const spiderChart = lc.Spider()

Spider chartSpider chart

// Lock every axis interval from 0 to 100.
spiderChart.setAxisInterval({ start: 0, end: 100, stopAxisAfter: true })
// Add series
const series = spiderChart.addSeries()
    .setName('Product A')
    .addPoints(
        { axis: 'Category 1', value: 10 },
        { axis: 'Category 2', value: 50 },
        { axis: 'Category 3', value: 80 },
    )

Scale labels​

Spider chart value axis labels can be configured using various methods around "scale labels" context:

  • SpiderChart.setScaleLabelFont - alter font of scale labels
  • SpiderChart.setScaleLabelFormatter - alter formatting of scale labels
  • SpiderChart.setScaleLabelStyle - alter fill style of scale labels
  • SpiderChart.setScaleLabelStrategy - alter alignment of scale labels

Axis labels​

Spider chart axis labels can be configured using various methods around "axis labels" context:

  • SpiderChart.setAxisLabelFont - alter font of axis labels
  • SpiderChart.setAxisLabelStyle - alter fill style of axis labels
  • SpiderChart.setAxisLabelStrategy - alter alignment of axis labels

Series color​

series
    .setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setPointFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))

For more details about style API, please see Styles, colors and fonts.

Chart title​

spiderChart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style​

ChartXY has 3 different levels of backgrounds:

  • Series background (area enclosed by axes)
  • Chart background (entire chart area)
  • Engine background (additional background shared by entire engine)
    • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.
spiderChart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
    .setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))
spiderChart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Space around chart​

spiderChart.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Disable animations​

const spiderChart = lc.Spider({ animationsEnabled: false })

Cursors​

Please see common Cursors section.

Legend​

Please see common Legend section.

Positioning charts​

Please see common Positioning charts section.

Color themes​

Please see common Color themes section.