Skip to main content
Version: 6.1.2

Gauge Chart

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

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

Gauge chart Gauge chart

Gauge data value and interval​

gauge
    .setInterval(0, 100)
    .setValue(90)

Gauge angle interval​

gauge.setAngleInterval(180, 0)

Value indicators​

gauge
    .setValueIndicators([
        { start: 0, end: 25, color: ColorCSS('red') },
        { start: 25, end: 50, color: ColorCSS('orange') },
        { start: 50, end: 75, color: ColorCSS('yellow') },
        { start: 75, end: 100, color: ColorCSS('green') },
    ])
    .setValueIndicatorThickness(25)
    .setGapBetweenBarAndValueIndicators(5)

Gauge chart Gauge chart

Gauge thickness​

// Thickness in pixels
gauge.setBarThickness(80)

Disable rounded edges​

gauge.setRoundedEdges(false)

Gauge style​

gauge
    .setBarColor(ColorRGBA(255, 0, 0))
    .setBarGradient(false)
    .setBarStrokeStyle(
        new SolidLine({
            thickness: 2,
            fillStyle: new SolidFill({ color: ColorRGBA(255, 255, 255) }),
        }),
    )

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Background glow​

By default, background glow is colored dynamically according to the current gauge bar color. However, the background color can be set to fixed color or disabled completely.

// Disable background glow
chart.setGlowColor(undefined)
// Use explicit glow color
chart.setGlowColor(ColorRGBA(255, 0, 0, 64))
// Use dynamic coloring, set custom alpha value
chart.setGlowColor({auto: true, alpha: 32})

Value label​

gauge
    .setValueFormatter((value) => `${value.toFixed(1)} €`)
    .setValueLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setValueLabelFont((font) => font.setSize(32))

Unit label​

gauge
    .setUnitLabel('km/h')
    .setUnitLabelFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setUnitLabelFont((font) => font.setSize(16))

Ticks​

gauge
    .setTickFormatter((value) => value.toFixed(1))
    .setTickFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setTickFont((font) => font.setSize(24))

Chart title​

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

Needle​

gauge
    .setNeedleLength(100)
    .setNeedleAlignment(-1)
    .setNeedleThickness(10)
    .setNeedleStrokeStyle(
        new SolidLine({
            thickness: 2,
            fillStyle: new SolidFill({ color: ColorRGBA(255, 255, 255) }),
        }),
    )
    .setNeedleFillStyle(
        new SolidFill({
            color: ColorRGBA(255, 0, 0),
        }),
    )

Background style​

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

Space around chart​

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

Disable animations​

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

Positioning charts​

Please see common Positioning charts](/6.1.2/more-guides/positioning-charts) section.

Color themes​

Please see common Color themes](/6.1.2/more-guides/themes) section.