SciChart.js JavaScript 2D Charts API > 2D Chart Types > Glow and DropShadow Shader Effects
Glow and DropShadow Shader Effects

 

SciChart.js features WebGL shader-based GlowEffect and ShadowEffect effects which may be added onto chart types throughout our library.

WebGL Shader effects applied to JavaScript Charts to achieve glow and dropshadow

Above: WebGL GlowEffect added to the Real-time Ghosted Traces example

 

Adding Glow Effects to Series

A glow shader effect can be added to series to give it an oscilloscope / VDU style effect.

GlowEffect example
Copy Code
import { GlowEffect } from "scichart/Charting/Visuals/RenderableSeries/GlowEffect";
import { Point } from "scichart/Core/Point";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";

sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
        strokeThickness: 2,
        stroke: "#FFFF00",
        effect: new GlowEffect(wasmContext, {
            range: 0,
            intensity: 1,
            color: "#333333",
            offset: new Point(10, 10)
        })
    })
);

This results in the following (visible in the Vital Signs monitor example).

WebGL Shader effects applied to JavaScript Charts to achieve glow and dropshadow

 

Adding Shadow Effect to Series

Drop-shadow effects are also in development, and an example will be provided soon.