Bar Chart

BarChart feature can be used for a number of different "bar" type visualizations:

• Bar charts
• Grouped bar charts
• Stacked bar charts

// Creation of BarChart
const lc = lightningChart()
const barChart = lc.BarChart()

Bar chart

Bar chart data is specified as an Array of JS objects with category: string and value: number properties.

barChart.setData([
    { category: 'Helsinki', value: 19.1 },
    { category: 'New York', value: 20.6 },
    { category: 'London', value: 16.6 },
    { category: 'Budapest', value: 21.8 },
    { category: 'Tallinn', value: 21.0 },
])

Grouped Bar Chart

Bar chart can also display groups of categories. For example, employee counts of different countries grouped by department:

The only difference is in data supply method:

barChart.setDataGrouped(
    ['Finland', 'Germany', 'UK'],
    [
        { subCategory: 'Engineers', values: [48, 27, 24] },
        { subCategory: 'Sales', values: [19, 40, 14] },
        { subCategory: 'Marketing', values: [33, 33, 62] },
    ],
)

Stacked Bar Chart

Alternatively, Bar chart Groups can also be stacked instead of putting them next to each other, by using setDataStacked method:

barChart.setDataStacked(
    ['1999', '2004', '2009', '2014', '2019', '2021'],
    [
        { subCategory: 'Symbian OS', values: [1, 51, 43, 0, 0, 0] },
        { subCategory: 'Palm OS', values: [66, 18, 1, 0, 0, 0] },
        { subCategory: 'BlackBerry OS', values: [1, 7, 20, 0.5, 0, 0] },
        { subCategory: 'Windows Mobile', values: [20, 13, 7, 2, 0, 0] },
        { subCategory: 'iOS', values: [0, 0, 15, 19, 14, 27] },
        { subCategory: 'Android', values: [0, 0, 8, 77, 82, 72] },
        { subCategory: 'Other', values: [12, 11, 6, 1.5, 4, 1] },
    ],
)

Horizontal Bar Charts

Bar charts are vertical by default, but they can be rotated by supplying an option during creation time:

const barChart = lc.BarChart({ type: BarChartTypes.Horizontal })

Sorting

By default, Bar charts sort data in Descending order. This can be selected using BarChart.setSorting method:

barChart.setSorting(BarChartSorting.Descending)
barChart.setSorting(BarChartSorting.Ascending)
barChart.setSorting(BarChartSorting.Alphabetical)
barChart.setSorting(BarChartSorting.None)

Real-time data

To connect real-time data to a Bar Chart, simply call setData (or setDataGrouped / setDataStacked) repeatedly to update previously displayed data.

Value labels

Bar chart labels are separated to two types: Value labels and Category labels. To configure Value labels, use setValueLabels method.

// Example, specify value label position and formatting
barChart.setValueLabels({
    position: 'inside-bar-centered',
    formatter: (bar, category, value) => `${value.toFixed(1)} €`
})

// Example, set value label font size, rotation and fill style
barChart.setValueLabels((labels) => ({
    labelFont: labels.labelFont.setSize(10),
    labelRotation: 0,
    labelFillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }),
}))

// Example, hide value labels
barChart.setValueLabels({ labelFillStyle: emptyFill })

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

Category labels

Category labels work almost exactly same as Value labels, except for few differences:

• tickStyle and tickLength properties available.
• position property not available.
• formatter syntax is different.

// Example, specify category label formatting
barChart.setCategoryLabels({
    formatter: (category, categoryValuesTotal) => `${category} (${categoryValuesTotal})`
})

// Example, set category label font size, rotation and fill style
barChart.setCategoryLabels((labels) => ({
    labelFont: labels.labelFont.setSize(10),
    labelRotation: 0,
    labelFillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }),
}))

// Example, hide category labels
barChart.setCategoryLabels({ labelFillStyle: emptyFill })

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

Bar style

By default, bars are colored according to active Theme. Bars can also be styled individually by fetching a reference to any particular bar.

// Example, set specific bar style by referencing `category` and optionally `subCategory`
const fillRed = new SolidFill({ color: ColorRGBA(255, 0, 0) })
barChart.getBar(category: string, subCategory?: string).setFillStyle(fillRed)

// Example, set all bars style
const fillRed = new SolidFill({ color: ColorRGBA(255, 0, 0) })
barChart.getBars().forEach((bar) => bar.setFillStyle(fillRed))

Note that Bars are only created after setData (or equivalent) method is called.

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

Chart title

chart
    .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

BarChart 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.

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

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

Space around chart

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

Animations

// Example, disable all animations
const barChart = lc.BarChart({ animationsEnabled: false })

Different animations can also be individually configured:

// Example, disable category position animation
barChart.setAnimationCategoryPosition(false)

// Example, specify speed of bar value animations
barChart.setAnimationValues(true, 2)

User interactions

By default, Bar chart has practically no user interactions. BarChartBar objects expose an Event API that can be used to track user interactions on any particular Bar:

barChart.getBar(category: string, subCategory?: string).onMouseClick((bar, event) => {
    console.log('user clicked', bar.category, bar.subCategory, bar.value)
})

Enable value axis tick gridlines

By default, Bar charts don't have value axis tick grid lines. These can be enabled like this:

barChart.valueAxis.setTickStrategy(AxisTickStrategies.Numeric, (ticks) =>
    ticks
        .setMajorTickStyle((major) => major.setGridStrokeStyle(barChart.getTheme().xAxisNumericTicks.majorTickStyle.gridStrokeStyle))
        .setMinorTickStyle((minor) => minor.setGridStrokeStyle(barChart.getTheme().xAxisNumericTicks.minorTickStyle.gridStrokeStyle)),
)

Coordinate translations

LightningChartJS has a number of different coordinate systems that are not natively present on a web page - most importantly, the charts Axes.

In many data visualization use cases it is critical to add annotations or markers at specific coordinates along the Axes and data series. Because of this, the ability to translate between coordinates on the web page and the axes is critical.

In this context, "client" refers to the Web API Client coordinate system.

Translating client coordinate to Axis

chart.onSeriesBackgroundMouseClick((_, event) => {
    const locationBars = chart.translateCoordinate(event, chart.coordsBars)
    // locationBars tells the clicked location relative to Bar Chart value and category axes (category = 0, 1, 2, 3, ...).
    console.log(locationBars)
})

Translating Axis coordinate to client

const locationBars = { iCategory: 1, value: 100 }
const locationClient = chart.translateCoordinate(locationBars, chart.coordsClient)

Relative coordinate system

Apart from the widely used "axis" and "client" coordinate system, there is another, the "relative" coordinate system. This is mostly utilized for LightningChart UI components that are positioned as pixel locations relative to the chart (e.g. 10 pixels from left edge etc.).

// Example, translate bar coordinate to relative coordinate
const locationBars = { iCategory: 1, value: 100 }
const locationRelative = chart.translateCoordinate(locationBars, chart.coordsRelative)

Cursors

Please see common Cursors section.

Axis

Please see common Axis section.

Legend

Please see common Legend section.

Positioning charts

Please see common Positioning charts section.

Color themes

Please see common Color themes section.