LightningChart JSDynamic coloring 2D charts in LightningChart JS
TutorialAchieve dynamically-colored 2D JavaScript charts using a value palette.
Written by a human | Updated on April 14th, 2025
Dynamic Coloring 2D Charts in LightningChart JS
Hello! This week’s tutorial is about Dynamic Coloring 2D Charts with LightningChart JS. This will be a guide where we’ll explore the practicality and creativity that dynamic coloring brings to JavaScript charting applications… in other words, why use dynamic coloring in JS charts?
Dynamic coloring breathes life into 2D charts, making them not only informative but visually engaging. When using LightningChart JS, you can achieve this by assigning a value palette based on the Y-axis difference to each data point.
Additionally, LightningChart JS supports dynamic coloring 3D charts by X or Y coordinates, simply by setting the PalettedFill.lookUpProperty to ‘x’ or ‘y’.
By adding dynamic coloring to your JavaScript charts, you can:
1. Improve how you represent data: Dynamic coloring makes it easier to differentiate data points and trends, improving data interpretation.
2. Highlight Important Information: Certain data points or ranges can be emphasized, drawing attention to critical insights (LightningChart has several UI features that support this).
3. Improve Chart Look and Feel: Improving charts with colors adds an element of aesthetics, making them more engaging.
4. Decision-Making: Chart apps with dynamic coloring provide a better and easier way to understand data, supporting better decision-making.
So, if you often analyze data trends or create interactive dashboards, dynamic coloring 2D charts could be a valuable tool when developing JS apps. Let’s begin now.
Project Overview
This tutorial will teach you how to create dynamic coloring 2D charts with LightningChart JS using a value palette. In practice, this is done by calculating the difference of the Y-axis and assigning a value property to each data point but naturally, there are endless different ways to use this!
In addition to this, dynamic coloring by X or Y coordinates is also supported. This is activated simply by setting the PalettedFill.lookUpProperty to ‘x’ or ‘y’.
Download the project to follow the tutorial
Template Setup
1. Download the template provided to follow the tutorial.
2. After downloading the template, you’ll see a file tree like this:
3. Open a new terminal and run the npm install command:
As usual in a NodeJS project, you need to run the npm install command. That would be everything for our initial setup. Let’s code.
CHART.ts
Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.
1. Declare the constant lcjs that will refer to our @arction/lcjs/xydata libraries.
// Import LightningChartJS
const lcjs = require('@arction/lcjs')2. Extract required classes from lcjs
// Extract required parts from LightningChartJS.
const { lightningChart, PointShape, PalettedFill, LUT, regularColorSteps, Themes } = lcjs
// Import data-generators from 'xydata'-library.
const { createProgressiveTraceGenerator } = require('@arction/xydata')3. Create the chart object
// Create a XY Chart.
const chart = lightningChart()
.ChartXY({
theme: Themes.darkGold,
})
.setTitle('2D points value palette coloring')
.setPadding({ right: 20 })
const theme = chart.getTheme()You can edit the chart theme using any of the pre-built themes. You can access the theme value using the method getTheme().
4. Generating the palette
const palette = new PalettedFill({
lookUpProperty: 'value',
lut: new LUT({
units: 'trace dist (y)',
interpolate: true,
steps: regularColorSteps(0, 10, theme.examples.intensityColorPalette).map((step, i, steps) =>
// Make last step transparent.
i === steps.length - 1 ? { ...step, color: step.color.setA(0) } : step,
),
}),
})PalettedFill
This property for the style class describes a dynamically looked-up fill color. Using a PalettedFill, each data point, and even each pixel, can be colored individually. The basis of coloring can be configured extensively with various option combinations.
Examples of PalettedFill, just like all the “LC JS” style classes, are immutable. This means that its setters don’t modify the actual object but instead return an entirely new modified object.
Properties of PalettedFill
LUT: color lookup table. This is essentially a list of colors paired with numeric values. See LUT for more details.
lookUpProperty: selects the basis of color lookup:
- value: LUT value is taken from a separate value that can be set by the user by some Series-specific logic.
- X: LUT value is taken directly from data points X coordinate.
- Y: LUT value is taken directly from data points Y coordinate.
- Z: LUT value is taken directly from data points Z coordinate.
5. Generating data points
createProgressiveTraceGenerator()
.setNumberOfPoints(1000)
.generate()
.toPromise()6. createProgressiveTraceGenerator
Create a new Progressive Trace generator with default values. The generator creates random data with a progressive X-axis and a random Y-axis. A progressive trace data generator. Generates point data that has a progressive X axis. The data is always derived from the previous point.
7. Creating point series
.then((tracePoints) => {
const points = chart
.addPointSeries({
pointShape: PointShape.Circle,
})
.setName('Outliers')
.setPointSize(3.0)
.setPointFillStyle(palette)
// IMPORTANT: Individual point values must be explicitly enabled for dynamic coloring.
.setIndividualPointValueEnabled(true)PointShape:- Circle
- Square
- Triangle
setPointFillStyle: Set point fill style of Series. In this case, we will use the palette that we created before.setIndividualPointValueEnabled: Enable or disable individual point value attributes. When enabled, each added data point can be associated with a numeric value attribute.
8. Generate points for outlier series
const outlierPoints = []
tracePoints.forEach((p) =>
outlierPoints.push(
...new Array(Math.round(Math.random() * 50)).fill(0).map((_, i) => {
const outlierY = p.y + (Math.random() * 2 - 1) * 10
return {
x: p.x,
y: outlierY,
// `value` is used to lookup color from palette. Manual calculation allows any kind of data set to be used.
value: Math.abs(outlierY - p.y),
}
}),
),
)
points.add(outlierPoints)The outlier points will be generated from the randomly generated Y points. A random value will be added to prevent these data points from overlapping with the original Y-value. These values are random calculations (for demonstration purposes).
9. Adding trace points line
const line = chart
.addLineSeries({
dataPattern: {
pattern: 'ProgressiveX',
},
})
.setName('Trace stroke')
.add(tracePoints)
.setStrokeStyle((style) => style.setThickness(5))tracePoints).
- Progressive. Axis will scroll to show new, progressive data, but will keep its interval constant – leaving older data out of view.
- Thickness. The thickness of the line. at a higher value, the line will appear thicker.
10. Adding the legend box
chart
.addLegendBox()
.add(chart)
// 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.2,
})A legendBox is a component that describes the collections of the chart components, e.g., series, highlighters, etc. It contains a title and buttons for each attached chart component that display the component name and can be clicked to hide/restore that particular component.
These buttons are known as legend box entries. Additionally, attaching a series with an associated color look-up table (LUT) will result in the LegendBox automatically visualizing the color look-up range. A legendBox can be created with the addLegendBox method, which is supported by all chart types. For example ChartXY.addLegendBox.
Conclusion on Dynamic Coloring 2D Charts
Finally, to run the telemetry dashboard in your browser, open a new terminal and run the npm start command. This will retrieve you a local path where the project is running, usually something like http://localhost:8080/, CTRL + click to visualize.
Dynamic coloring allows you to highlight key insights, emphasize outliers, and convey complex information effortlessly. Whether you’re tracking trends, analyzing data sets, or presenting to an audience, this technique elevates your charts to a whole new level.
This was a quick tutorial but dynamic coloring 2D charts is a great addition to your charting applications and can seriously benefit the way end-users understand and interact with your applications. I invite you to continue discovering more features about LightningChart JS and integrate them within your projects. See you in the next article!
Omar Urbano
Software Engineer
Continue learning with LightningChart
Alternative to SciChart 2026: Why Performance Leaders Choose the Industry Standard
The data visualization market in 2026 is highly fragmented, yet in mission-critical sectors, one name consistently emerges when performance limits are pushed to the edge. While SciChart remains a known player, technical facts and market history favor LightningChart as...
Debunking SciChart’s Performance
Learn about SciChart’s misleading benchmark performance metrics that distort how a real high-end chart library performs.
Swing index indicator: formula and implementation with LC JS Trader
Learn the Swing Index indicator formula and implementation with LightningChart JS Trader to detect trend direction and refine trading signals.
If you have any questions, feel free to contact us!
©LightningChart Ltd 2026. All rights reserved.