Skip to main content
Version: 5.2.1

Gauge Chart

GaugeChart is used to display a single data value (number) in the form of a dial.

// Creation of GaugeChart
const lc = lightningChart()
const gauge = lc.Gauge()

Gauge chartGauge chart

Gauge data value​

const gaugeSlice = gauge.getDefaultSlice()
    .setInterval(0, 100)
    .setValue(90)

Gauge thickness​

// Thickness as pixels
gauge.setThickness(80)

Gauge style​

gauge.setGaugeFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

Color by value​

gauge.setLUT(
    new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorRGBA(255, 0, 0) },
            { value: 100, color: ColorRGBA(0, 255, 0) },
        ],
    }),
)

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

Gauge angle interval​

gauge.setAngleInterval(225, -45)

Gauge data labels​

gauge.setDataLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
gauge.setDataLabelFont((font) => font.setSize(32))
gauge.setDataLabelFormatter((value) => `${value.toFixed(1)} €`)
gauge.setDataLabelFormatter(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }))

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

Chart title​

gauge
    .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​

GaugeChart has 2 different levels of backgrounds:

  • 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.
gauge
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
gauge.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

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

Space around chart​

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

Disable animations​

const gauge = lc.Gauge({ animationsEnabled: false })

Legend​

Please see common Legend section.

Positioning charts​

Please see common Positioning charts section.

Color themes​

Please see common Color themes section.