Close Editor Run Reset Auto Update CJS /*
* LightningChartJS example that showcases creation of a grouped bars chart.
*/
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Extract required parts from LightningChartJS.
const {
lightningChart,
emptyLine,
AutoCursorModes,
UIOrigins,
LegendBoxBuilders,
AxisScrollStrategies,
AxisTickStrategies,
UIElementBuilders,
Themes
} = lcjs
const lc = lightningChart()
// Define an interface for creating vertical bars.
let barChart
{
barChart = (options) => {
const figureThickness = 10
const figureGap = figureThickness * .25
const groupGap = figureGap * 3.0
const groups = []
const categories = []
// Create a XY-Chart and add a RectSeries to it for rendering rectangles.
const chart = lc.ChartXY(options)
.setTitle('Grouped Bars (Employee Count)')
.setAutoCursorMode(AutoCursorModes.onHover)
// Disable mouse interactions (e.g. zooming and panning) of plotting area
.setMouseInteractions(false)
// Temporary fix for library-side bug. Remove after fixed.
.setPadding({ bottom: 30 })
// X-axis of the series
const axisX = chart.getDefaultAxisX()
.setMouseInteractions(false)
.setScrollStrategy(undefined)
// Disable default ticks.
.setTickStrategy(AxisTickStrategies.Empty)
// Y-axis of the series
const axisY = chart.getDefaultAxisY()
.setMouseInteractions(false)
.setTitle('Number of Employees')
.setInterval(0, 70)
.setScrollStrategy(AxisScrollStrategies.fitting)
// cursor
//#region
// Modify AutoCursor.
chart.setAutoCursor(cursor => cursor
.disposePointMarker()
.disposeTickMarkerX()
.disposeTickMarkerY()
.setGridStrokeXStyle(emptyLine)
.setGridStrokeYStyle(emptyLine)
.setResultTable((table) => {
table
.setOrigin(UIOrigins.CenterBottom)
})
)
// Define function that creates a Rectangle series (for each category), that adds cursor functionality to it
const createSeriesForCategory = (category) => {
const series = chart.addRectangleSeries()
// Change how marker displays its information.
series.setCursorResultTableFormatter((builder, series, figure) => {
// Find cached entry for the figure.
let entry = {
name: category.name,
value: category.data[category.figures.indexOf(figure)]
}
// Parse result table content from values of 'entry'.
return builder
.addRow('Department:', entry.name)
.addRow('# of employees:', String(entry.value))
})
return series
}
//#endregion
// LegendBox
//#region
const legendBox = chart.addLegendBox(LegendBoxBuilders.VerticalLegendBox)
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
.setAutoDispose({
type: 'max-width',
maxWidth: 0.20,
})
.setTitle('Department')
//#endregion
// Function redraws bars chart based on values of 'groups' and 'categories'
const redraw = () => {
let x = 0
for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
const group = groups[groupIndex]
const xStart = x
for (const category of categories) {
const value = category.data[groupIndex]
if (value !== undefined) {
// Position figure of respective value.
const figure = category.figures[groupIndex]
figure.setDimensions({
x,
y: 0,
width: figureThickness,
height: value
})
// Figure gap
x += figureThickness + figureGap
}
}
// Position CustomTick
group.tick.setValue((xStart + x - figureGap) / 2)
// Group gap
x += groupGap
}
axisX.setInterval(-(groupGap + figureGap), x)
}
const addGroups = (names) => {
for (const name of names)
groups.push({
name,
tick: axisX.addCustomTick(UIElementBuilders.AxisTick)
.setGridStrokeLength(0)
.setTextFormatter((_) => name)
})
}
const addCategory = (entry) => {
// Each category has its own series.
const series = createSeriesForCategory(entry)
.setName(entry.name)
entry.figures = entry.data.map((value) => series.add({ x: 0, y: 0, width: 0, height: 0 }))
legendBox.add(series)
categories.push(entry)
redraw()
}
// Return public methods of a bar chart interface.
return {
addCategory,
addGroups
}
}
}
// Use bar chart interface to construct series
const chart = barChart({
// theme: Themes.darkGold
})
// Add groups
chart.addGroups(['Finland', 'Germany', 'UK'])
// Add categories of bars
const categories = ['Engineers', 'Sales', 'Marketing']
const data = [
[48, 27, 24],
[19, 40, 14],
[33, 33, 62]
]
data.forEach((data, i) =>
chart.addCategory({
name: categories[i],
data
})
)
JavaScript Grouped Bars Chart - Editor Also known as Multi-set / Clustered Bar Chart
This example shows creation of a Grouped Bar Chart made on user side by utilizing RectangleSeries. This is a variation of normal Bar Chart where groups of bars are spaced apart from each other for further categorizing.
Here's the creation of a Grouped Bar Chart using a pre-defined interface.
const chart = barChart ( )
chart. addGroups ( [
'Group A' ,
'Group B'
] )
chart
. addCategory ( {
name: 'Category #1' ,
data: [ 100 , 200 ] ,
fill: new SolidFill ( ) . setColor ( prettyColor1)
} )
. addCategory ( {
name: 'Category #2' ,
data: [ 50 , 160 ] ,
fill: new SolidFill ( ) . setColor ( prettyColor2)
} )
The actual Grouped Bar Chart logic just serves to provide a starting point for users to create their own API based on their needs and preferences.