/**
 * Basic example of LightningChart JS Bar Charts.
 */
const lcjs = require('@lightningchart/lcjs')
const { lightningChart, BarChartTypes, BarChartSorting, SolidFill, Themes } = lcjs

const lc = lightningChart()
const barChart = lc
    .BarChart({
        legend: { visible: false },
        type: BarChartTypes.Vertical,
        // theme: Themes.darkGold,
    })
    .setSorting(BarChartSorting.Disabled)
    .setValueLabels({
        position: 'inside-bar'
    })

const theme = barChart.getTheme()

barChart.valueAxis.setTitle('Electricity consumption change').setUnits('%')

const data = [
    { category: 'Jan', value: 20 },
    { category: 'Feb', value: 20 },
    { category: 'Mar', value: -25 },
    { category: 'Apr', value: 40 },
    { category: 'May', value: 28 },
    { category: 'Jun', value: -23 },
    { category: 'Jul', value: -40 },
    { category: 'Aug', value: 35 },
    { category: 'Sep', value: 17 },
    { category: 'Oct', value: 24 },
    { category: 'Nov', value: -29 },
    { category: 'Dec', value: 15 },
]
barChart.setData(data)

barChart.getBars().forEach((bar) =>
    bar.setFillStyle(
        new SolidFill({
            color:
                bar.value > 0
                    ? theme.examples.badGoodColorPalette[0]
                    : theme.examples.badGoodColorPalette[theme.examples.badGoodColorPalette.length - 1],
        }),
    ),
)

JavaScript Vertical Bar Chart - Editor

bar

Also known as Bar Graph, Column Chart or Column Graph

This example shows the most basic usage of LightningChart JS BarChart.
Bar Charts show discrete numerical comparisons across categories, where the value represents the height of a bar.
LightningChart JS includes a very simple high level feature for creating interactive Bar Charts and supplying them with categorical data:

const barChart = lightningChart().BarChart()
const data = [
    { category: 'Jan', value: 20 },
    { category: 'Feb', value: 20 },
    { category: 'Mar', value: -25 },
    { category: 'Apr', value: 40 },
    { category: 'May', value: 28 },
    { category: 'Jun', value: -23 },
    { category: 'Jul', value: -40 },
    { category: 'Aug', value: 35 },
    { category: 'Sep', value: 17 },
    { category: 'Oct', value: 24 },
    { category: 'Nov', value: -29 },
    { category: 'Dec', value: 15 },
]
barChart.setData(data)

More Bar Chart examples.