/*
 * LightningChart JS Example that showcases Stacked Bars Chart.
 */
// Import LightningChartJS
const lcjs = require('@lightningchart/lcjs')

// Extract required parts from LightningChartJS.
const { lightningChart, BarChartSorting, Themes } = lcjs

const barChart = lightningChart()
    .BarChart({
        // theme: Themes.darkGold,
    })
    .setTitle('% of market share by mobile OS in 1999-2021')
    .setValueLabels(undefined)
    .setCornerRadius(3)

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] },
    ],
)

barChart.valueAxis.setTitle('Market share').setUnits('%')

JavaScript Stacked Bar Chart - Editor

bar

This example shows creation of a Stacked Bars Chart.

The stacked bar chart (aka stacked bar graph) extends the standard bar chart from looking at numeric values across one categorical variable to two. Each bar in a standard bar chart is divided into a number of sub-bars stacked end to end, each one corresponding to a level of the second categorical variable.

Here's the creation of a Stacked Bar Chart with LightningChart JS.

// Create Chart.
const barChart = lightningChart().BarChart()

// Add categories and subCategory & values.
barChart.setDataStacked(
    ['category1', 'category2', 'category2'],
    [
        { subCategory: 'subCategory 1', values: [1, 51, 43] },
        { subCategory: 'subCategory 2', values: [66, 18, 1] },
        { subCategory: 'subCategory 3', values: [1, 7, 20] },
    ],
)