Close Editor Run Reset Auto Update CJS /*
* LightningChartJS example for rendering a 'vertical bar chart' using user-side logic as there is no dedicated Chart type for Bars, yet.
*/
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisScrollStrategies,
SolidFill,
SolidLine,
ColorRGBA,
emptyLine,
AutoCursorModes,
UIOrigins,
AxisTickStrategies,
UIElementBuilders,
Themes
} = lcjs
const lc = lightningChart()
const months = [
'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'
]
// Define an interface for creating vertical bars.
let barChart
{
barChart = (options) => {
// flat red fill style for positive bars
const flatRedStyle = new SolidFill().setColor(ColorRGBA(242, 67, 79))
// flat blue fill style for negative bars
const flatBlueStyle = new SolidFill().setColor(ColorRGBA(42, 171, 240))
let x = 0
const figureThickness = 10
const figureGap = figureThickness * .5
const bars = []
// Create a XY-Chart and add a RectSeries to it for rendering rectangles.
const chart = lc.ChartXY(options)
.setTitle('Changes in electricity usage between 2017 and 2018')
.setAutoCursorMode(AutoCursorModes.onHover)
// Disable mouse interactions (e.g. zooming and panning) of plotting area
.setMouseInteractions(false)
// Bar series represented with rectangles.
const rectangles = chart.addRectangleSeries()
// cursor
//#region
// Show band using Rectangle series.
const band = chart.addRectangleSeries()
.setMouseInteractions(false)
.setCursorEnabled(false).add({ x: 0, y: 0, width: 0, height: 0 })
.setFillStyle(new SolidFill().setColor(ColorRGBA(255, 255, 255, 50)))
.setStrokeStyle(emptyLine)
.dispose()
// Modify AutoCursor.
chart.setAutoCursor(cursor => cursor
.disposePointMarker()
.disposeTickMarkerX()
.disposeTickMarkerY()
.setGridStrokeXStyle(emptyLine)
.setGridStrokeYStyle(emptyLine)
.setResultTable((table) => {
table
.setOrigin(UIOrigins.CenterBottom)
})
)
// Change how series parses its data-points using series method.
rectangles.setCursorResultTableFormatter((builder, series, figure) => {
let counter = 0
// Find cached entry for the figure.
const entry = bars.find((bar, index) => {
counter = index;
return bar.rect == figure
}).entry
// Parse result table content from values of 'entry'.
return builder
.addRow(`Month: ${months[counter]}`)
.addRow(`Value: ${entry.value}%`)
})
// Apply cursor logic using series.onHover method
rectangles.onHover((_, point) => {
if (point) {
const figure = point.figure
const dimensions = figure.getDimensionsPositionAndSize()
// Show band.
band
.setDimensions({
x: dimensions.x - figureGap * .5,
y: figure.scale.y.getInnerStart(),
width: dimensions.width + figureGap,
height: figure.scale.y.getInnerInterval()
})
.restore()
} else
band.dispose()
})
//#endregion
// X-axis of the series
const axisX = chart.getDefaultAxisX()
.setTitle('Quarter')
.setMouseInteractions(false)
.setScrollStrategy(undefined)
// Disable default ticks.
.setTickStrategy(AxisTickStrategies.Empty)
// Y-axis of the series
const axisY = chart.getDefaultAxisY()
.setTitle('(%)')
.setMouseInteractions(false)
.setScrollStrategy(AxisScrollStrategies.fitting)
//Add middle line
const constantLine = axisY.addConstantLine()
constantLine.setValue(0)
.setMouseInteractions(false)
.setStrokeStyle(new SolidLine(
{ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(125, 125, 125) }) }))
/**
* Add multiple bars.
* @param entries Add multiple bars data.
*/
const addValues = (entries) => {
for (const entry of entries) {
bars.push(add(entry))
}
}
/**
* Add single bar.
* @param entry Add a single bar data.
*/
const addValue = (entry) => {
bars.push(add(entry))
}
/**
* Construct bar to draw.
* @param entry Single bar data.
*/
const add = (entry) => {
// Create rect dimensions.
const rectDimensions = {
x: x - figureThickness,
y: 0,
width: figureThickness,
height: entry.value
}
// Add rect to the series.
const rect = rectangles.add(rectDimensions)
// Set individual color for the bar.
rect.setFillStyle(entry.value > 0 ? flatRedStyle : flatBlueStyle)
// Set view manually.
axisX.setInterval(
-(figureThickness + figureGap),
x + figureGap
)
// Add custom tick, more like categorical axis.
if (entry.category.length > 0) {
axisX.addCustomTick(UIElementBuilders.AxisTick)
.setValue(x - figureGap)
.setGridStrokeLength(0)
.setTextFormatter(_ => entry.category)
.setMarker(marker => marker
.setTextFillStyle(new SolidFill({ color: ColorRGBA(170, 170, 170) }))
)
}
x += figureThickness + figureGap
// Return data-structure with both original 'entry' and the rectangle figure that represents it.
return {
entry,
rect
}
}
// Return public methods of a bar chart interface.
return {
addValue,
addValues
}
}
}
// Use bar chart interface to construct series.
const chart = barChart({
// theme: Themes.darkGold
})
// Add multiple bars at once.
chart.addValues([
{ category: '', value: 20 },
{ category: 'Q1', value: 20 },
{ category: '', value: -25 },
{ category: '', value: 40 },
{ category: 'Q2', value: 28 },
{ category: '', value: -23 },
{ category: '', value: -40 },
{ category: 'Q3', value: 35 },
{ category: '', value: 17 },
{ category: '', value: 24 },
{ category: 'Q4', value: -29 },
{ category: '', value: 15 }
])
JavaScript Vertical Bar Chart - Editor Also known as Bar Graph, Column Chart or Column Graph
This example shows the creation of a column chart made on user side by utilizing RectangleSeries which displays data as vertical bars. Bar Charts show discrete numerical comparisons across categories, where the value represents the height of a bar.
The following code below shows the creation of a Vertical Bar Chart using a pre-defined interface. Moreover, the current interface allows visualizing columns with negative values.
The bar series accepts points in format { category: string, value: number }
. Any number of points can be added with a single call.
const chart = barChart ( )
chart. addValues ( [
{ category: 'A' , value: 20 } ,
{ category: 'B' , value: - 30 }
] )
The actual Bar Chart logic just serves to provide a starting point for users to create their own API based on their needs and preferences.