Create a Custom Theme for JavaScript Chart
Demonstrates how to create a Custom Theme for SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
data.ts
1import { closeValues, dateValues, highValues, lowValues, openValues } from "./data";
2
3import {
4 FastCandlestickRenderableSeries,
5 FastColumnRenderableSeries,
6 FastLineRenderableSeries,
7 NumericAxis,
8 NumberRange,
9 OhlcDataSeries,
10 RolloverModifier,
11 SciChartSurface,
12 XyDataSeries,
13} from "scichart";
14
15export const drawExample = async (rootElement: string | HTMLDivElement) => {
16 // Create a SciChartSurface
17 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
18
19 // Create and apply your custom theme
20 sciChartSurface.applyTheme({
21 annotationsGripsBackgroundBrush: "white",
22 annotationsGripsBorderBrush: "white",
23 axis3DBandsFill: "#1F3D6833",
24 axisBandsFill: "#1F3D6833",
25 axisBorder: "#1F3D68",
26 axisPlaneBackgroundFill: "Transparent",
27 columnFillBrush: "white",
28 columnLineColor: "white",
29 cursorLineBrush: "#6495ED99",
30 defaultColorMapBrush: [
31 { offset: 0, color: "DarkBlue" },
32 { offset: 0.5, color: "CornflowerBlue" },
33 { offset: 1, color: "#FF22AA" },
34 ],
35 downBandSeriesFillColor: "#52CC5490",
36 downBandSeriesLineColor: "#E26565FF",
37 downBodyBrush: "white",
38 downWickColor: "white",
39 gridBackgroundBrush: "white",
40 gridBorderBrush: "white",
41 labelBackgroundBrush: "#6495EDAA",
42 labelBorderBrush: "#6495ED",
43 labelForegroundBrush: "#EEEEEE",
44 legendBackgroundBrush: "#1D2C35",
45 lineSeriesColor: "white",
46 loadingAnimationForeground: "#6495ED",
47 loadingAnimationBackground: "#0D213A",
48 majorGridLineBrush: "#1F3D68",
49 minorGridLineBrush: "#102A47",
50 mountainAreaBrush: "white",
51 mountainLineColor: "white",
52 overviewFillBrush: "white",
53 planeBorderColor: "white",
54 rolloverLineBrush: "#FD9F2533",
55 rubberBandFillBrush: "#99999933",
56 rubberBandStrokeBrush: "#99999977",
57 sciChartBackground: "#0D213A",
58 scrollbarBackgroundBrush: "white",
59 scrollbarBorderBrush: "white",
60 scrollbarGripsBackgroundBrush: "white",
61 scrollbarViewportBackgroundBrush: "white",
62 scrollbarViewportBorderBrush: "white",
63 shadowEffectColor: "#000000FF",
64 textAnnotationBackground: "#6495EDAA",
65 textAnnotationForeground: "#333333",
66 tickTextBrush: "#6495ED",
67 upBandSeriesFillColor: "white",
68 upBandSeriesLineColor: "white",
69 upBodyBrush: "#6495EDA0",
70 upWickColor: "#6495ED",
71 axisTitleColor: "#EEEEEE",
72 chartTitleColor: "#EEEEEE",
73 });
74
75 // Create the XAxis, YAxis
76 const xAxis = new NumericAxis(wasmContext);
77 xAxis.visibleRange = new NumberRange(0, 31);
78 xAxis.axisTitle = "X Axis";
79 sciChartSurface.xAxes.add(xAxis);
80 const yAxis = new NumericAxis(wasmContext);
81 yAxis.visibleRange = new NumberRange(1, 1.2);
82 yAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3);
83 yAxis.labelProvider.formatCursorLabel = (dataValue: number) => dataValue.toFixed(3);
84 sciChartSurface.yAxes.add(yAxis);
85
86 // Create some series with data
87 const series1 = new FastLineRenderableSeries(wasmContext);
88 series1.strokeThickness = 3;
89 series1.stroke = "#16a085";
90 sciChartSurface.renderableSeries.add(series1);
91
92 series1.dataSeries = new XyDataSeries(wasmContext, {
93 xValues: [1, 5, 10, 15, 20, 25, 30],
94 yValues: [1.12, 1.121, 1.119, 1.11, 1.115, 1.112, 1.1],
95 });
96
97 const series2 = new FastCandlestickRenderableSeries(wasmContext, {
98 strokeThickness: 2,
99 dataSeries: new OhlcDataSeries(wasmContext, {
100 xValues: dateValues,
101 openValues,
102 highValues,
103 lowValues,
104 closeValues,
105 }),
106 dataPointWidth: 0.5,
107 });
108 series2.rolloverModifierProps.tooltipColor = "#d0d3d4";
109 series2.rolloverModifierProps.markerColor = "#d0d3d4";
110 sciChartSurface.renderableSeries.add(series2);
111
112 const series3 = new FastColumnRenderableSeries(wasmContext, {
113 fill: "rgba(176, 196, 222, 0.7)",
114 stroke: "#4682b4",
115 strokeThickness: 2,
116 dataPointWidth: 0.5,
117 });
118 sciChartSurface.renderableSeries.add(series3);
119 const dataSeries = new XyDataSeries(wasmContext);
120 for (let i = 1; i <= 30; i++) {
121 dataSeries.append(i, 1 + Math.sin(i * 0.1) * 0.1);
122 }
123 series3.dataSeries = dataSeries;
124
125 // Create tootip behaviour
126 sciChartSurface.chartModifiers.add(new RolloverModifier());
127 return { sciChartSurface, wasmContext };
128};
129Create A Custom Theme for JavaScript Chart
Overview
This example demonstrates how to create and apply a custom theme to a SciChart.js chart using JavaScript. The implementation focuses on leveraging SciChart.js's extensive theming API to modify the appearance of various chart components—including axes, grid lines, series, and interactive modifiers—while ensuring high-performance rendering through WebGL.
Technical Implementation
The chart is initialized asynchronously via the SciChartSurface.create method, which sets up the required WebGL context for optimal performance. Once the surface is created, a custom theme is applied using the sciChartSurface.applyTheme() method, where properties like axis borders, series colors, and annotation styles (conforming to the IThemeProvider type) are defined. The example instantiates high-performance renderable series such as FastLineRenderableSeries, FastCandlestickRenderableSeries, and FastColumnRenderableSeries to efficiently visualize complex datasets.
Features and Capabilities
Key features of this example include asynchronous chart initialization and dynamic data binding using data series like XyDataSeries and OhlcDataSeries. An interactive RolloverModifier enhances the chart experience by providing tooltips on mouse hover, which is particularly useful for real-time data updates. The custom theme not only personalizes the visual style but also contributes to performance optimizations by maintaining consistent styling across different chart elements.
Integration and Best Practices
Although this implementation is built with JavaScript, it follows best practices that are applicable to any modern web application. Asynchronous initialization using promises ensures that the WebGL context is loaded efficiently, while a dedicated cleanup function properly disposes of the SciChartSurface to avoid memory leaks. Developers are encouraged to explore further details in the SciChart.js Custom Theme Documentation and consult the SciChart.js initialization guidelines to ensure robust implementation and optimal performance.
javascript Chart Examples & Demos
See Also: Styling and Theming (11 Demos)
Chart Background Image with Transparency
Demonstrates how to create a JavaScript Chart with background image using transparency in SciChart.js
Styling a JavaScript Chart in Code
Demonstrates how to style a JavaScript Chart entirely in code with SciChart.js themeing API
Using Theme Manager in JavaScript Chart
Demonstrates our Light and Dark Themes for JavaScript Charts with SciChart.js ThemeManager API
Coloring Series per-point using the PaletteProvider
Demonstrates per-point coloring in JavaScript chart types with SciChart.js PaletteProvider API
JavaScript Point-Markers Chart
Demonstrates the different point-marker types for JavaScript Scatter charts (Square, Circle, Triangle and Custom image point-marker)
Dashed Line Styling
Demonstrates dashed line series in JavaScript Charts with SciChart.js
Data Labels
Show data labels on JavaScript Chart. Get your free demo now.
JavaScript Chart with Multi-Style Series
Demonstrates how to apply multiple different styles to a single series using RenderDataTransform
JavaScript Chart with lines split by thresholds
Demonstrates how to use a RenderDataTransform to split lines into multiple segments so they can be individually colored according to thresholds
JavaScript Chart Title
Demonstrates chart title with different position and alignment options
JavaScript Order of Rendering Example
The JavaScript Order of Rendering example gives you full control of the draw order of series and annotations for charts. Try SciChart's advanced customizations.