JavaScript Good/Bad Values Threshold Line Chart

Example that showcases LineSeries feature for coloring line dynamically based on Y coordinates.

This example is based on a completely normal Line Chart, where the Y value depicts some trend, such as a stock price, sensor measurement, etc.

Probably the most common need for dynamic Y based coloring comes from scenarios where the values have a range of Bad, Normal and Good values. A practical example could be a greenhouse where the room temperature is measured. For best results, the temperature should stay within acceptable range - neither too cold or too hot.

The dynamic Y coloring feature allows the visualization of this kind of value thresholds very intuitively, by automatically changing color of each data point based on the Y coordinate.

The logic of selecting color based on Y coordinate is done with a Value - Color lookup table, a conceptually simple object that can be widely used with many different LightningChart JS components.

The lookup table associates a range of Values with corresponding Colors.

Dynamic line coloring is a powerful feature which can serve many different needs. The best thing about it is that it doesn't compromise performance, meaning that you can use it just as well with 100 data points or 100 million data points.

In addition to dynamic coloring by Y coordinate there are also more dynamic coloring modes available: