Styling a JavaScript Chart in Code
Demonstrates how to style or theme a JavaScript Chart using SciChart.js, High Performance JavaScript Charts
drawExample.ts
index.html
vanilla.ts
1import {
2 SciChartSurface,
3 NumericAxis,
4 MouseWheelZoomModifier,
5 EAxisAlignment,
6 ZoomPanModifier,
7 TextAnnotation,
8 EHorizontalAnchorPoint,
9 ECoordinateMode,
10} from "scichart";
11
12export const drawExample = async (rootElement: string | HTMLDivElement) => {
13 // Demonstrates how to colour chart parts in code
14 // This is better done by themes, where you can also style the loader pre-scichart initialisation
15 //
16 const chartBackgroundColor = "#E4F5FC";
17 const axisBandsFill = "#1F3D6805";
18 const axisTitleColor = "#1F3D68";
19 const majorGridLineColor = "#264B9355";
20 const minorGridLineColor = "#264B9322";
21 const axisLabelColor = "#1F3D68";
22 const axisBackgroundFill = "#00000000";
23 const borderColor = "#1F3D68";
24
25 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement);
26 sciChartSurface.background = chartBackgroundColor;
27
28 // Create and style xAxis
29 sciChartSurface.xAxes.add(
30 new NumericAxis(wasmContext, {
31 axisTitle: "X Axis",
32 drawMajorBands: true,
33 axisBandsFill,
34 axisTitleStyle: {
35 fontSize: 25,
36 fontFamily: "Montserrat",
37 fontWeight: "bold",
38 fontStyle: "italic",
39 color: axisTitleColor,
40 },
41 majorGridLineStyle: {
42 strokeThickness: 1,
43 color: majorGridLineColor,
44 strokeDashArray: [10, 5],
45 },
46 minorGridLineStyle: {
47 strokeThickness: 1,
48 color: minorGridLineColor,
49 strokeDashArray: [2, 2],
50 },
51 majorTickLineStyle: {
52 strokeThickness: 1,
53 color: majorGridLineColor,
54 tickSize: 8,
55 },
56 minorTickLineStyle: {
57 strokeThickness: 1,
58 color: minorGridLineColor,
59 tickSize: 4,
60 },
61 useNativeText: false, // this must be false to use labelStyle fontWeight and fontStyle
62 labelStyle: {
63 fontSize: 16,
64 fontWeight: "bold",
65 fontStyle: "Italic",
66 color: axisLabelColor,
67 fontFamily: "Arial",
68 },
69 backgroundColor: axisBackgroundFill,
70 axisBorder: {
71 borderTop: 1,
72 color: borderColor,
73 },
74 })
75 );
76
77 // Create and style left YAxis
78 sciChartSurface.yAxes.add(
79 new NumericAxis(wasmContext, {
80 axisAlignment: EAxisAlignment.Left,
81 axisBandsFill,
82 axisTitle: "Left Y Axis",
83 axisTitleStyle: {
84 fontSize: 25,
85 fontFamily: "Montserrat",
86 fontWeight: "bold",
87 fontStyle: "italic",
88 color: axisTitleColor,
89 },
90 majorGridLineStyle: {
91 strokeThickness: 1,
92 color: majorGridLineColor,
93 strokeDashArray: [10, 5],
94 },
95 minorGridLineStyle: {
96 strokeThickness: 1,
97 color: minorGridLineColor,
98 strokeDashArray: [2, 2],
99 },
100 majorTickLineStyle: {
101 strokeThickness: 1,
102 color: majorGridLineColor,
103 tickSize: 8,
104 },
105 minorTickLineStyle: {
106 strokeThickness: 1,
107 color: minorGridLineColor,
108 tickSize: 4,
109 },
110 useNativeText: false, // this must be false to use labelStyle fontWeight and fontStyle
111 labelStyle: {
112 fontSize: 16,
113 fontWeight: "bold",
114 fontStyle: "Italic",
115 color: axisLabelColor,
116 fontFamily: "Arial",
117 },
118 backgroundColor: axisBackgroundFill,
119 axisBorder: {
120 borderRight: 1,
121 color: borderColor,
122 },
123 })
124 );
125
126 // Create and style right YAxis
127 sciChartSurface.yAxes.add(
128 new NumericAxis(wasmContext, {
129 useNativeText: false,
130 axisTitle: "Right Y Axis",
131 axisTitleStyle: {
132 fontSize: 25,
133 fontFamily: "Montserrat",
134 fontWeight: "bold",
135 fontStyle: "italic",
136 color: axisTitleColor,
137 },
138 axisAlignment: EAxisAlignment.Right,
139 majorGridLineStyle: {
140 strokeThickness: 1,
141 color: majorGridLineColor,
142 strokeDashArray: [10, 5],
143 },
144 minorGridLineStyle: {
145 strokeThickness: 1,
146 color: minorGridLineColor,
147 strokeDashArray: [2, 2],
148 },
149 majorTickLineStyle: {
150 strokeThickness: 1,
151 color: majorGridLineColor,
152 tickSize: 8,
153 },
154 minorTickLineStyle: {
155 strokeThickness: 1,
156 color: minorGridLineColor,
157 tickSize: 4,
158 },
159 labelStyle: {
160 fontSize: 16,
161 fontWeight: "bold",
162 fontStyle: "Italic",
163 color: axisLabelColor,
164 fontFamily: "Arial",
165 },
166 backgroundColor: axisBackgroundFill,
167 axisBorder: {
168 borderLeft: 1,
169 color: borderColor,
170 },
171 })
172 );
173
174 // Add title annotation
175 sciChartSurface.annotations.add(
176 new TextAnnotation({
177 text: "Chart with custom style applied in code",
178 fontSize: 20,
179 fontWeight: "Bold",
180 textColor: axisLabelColor,
181 x1: 0.5,
182 y1: 0,
183 opacity: 0.77,
184 horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
185 xCoordinateMode: ECoordinateMode.Relative,
186 yCoordinateMode: ECoordinateMode.Relative,
187 })
188 );
189
190 // Add some interactivity modifiers
191 sciChartSurface.chartModifiers.add(new ZoomPanModifier({ enableZoom: true }));
192 sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
193
194 sciChartSurface.zoomExtents();
195
196 return { sciChartSurface, wasmContext };
197};
198Styling a Chart in Code (JavaScript)
Overview
This example demonstrates how to apply in-code chart styling using SciChart.js in a JavaScript environment. The code programmatically customizes various chart elements such as the chart background via sciChartSurface.background, NumericAxis properties (including axisTitleStyle, major/minorGridLinesStyle, major/minorTickLinesStyle, labelStyle, backgroundColor and axisBorder, as well as annotations and interactive modifiers. This approach provides a clear and flexible way to style charts without relying on external themes or frameworks.
Technical Implementation
The chart is initialized asynchronously using the SciChartSurface.create() method, which leverages WebAssembly for optimal performance. Developers can refer to the Creating a new SciChartSurface and loading Wasm documentation for more details on this initialization pattern. The implementation focuses on detailed custom axis styling, where NumericAxis properties are configured for both the X and Y axes. Specific styling options like axis bands, custom dashed line styles for grid lines, and bespoke tick settings are applied to enhance the visual presentation. The configuration of these properties is explained in the Axis Styling Documentation. Interactive modifiers such as ZoomPanModifier and MouseWheelZoomModifier are integrated to allow users to pan and zoom within the chart. More on these interactivity features can be found in Tutorial 03 - Adding Zooming, Panning Behavior.
Features and Capabilities
This example highlights several advanced features including:
- Detailed customization of axis styling with tailored fonts, colors, grid line dash patterns, and axis borders.
- The use of a text annotation, configured with relative coordinate modes, to serve as a watermarked chart title. For additional information on annotations, visit the TextAnnotation Documentation.
- Interactive chart modifiers that provide smooth zooming and panning functionality.
- A proper resource management strategy where the
SciChartSurfaceis disposed of when no longer needed, ensuring optimal memory usage as discussed in Memory Best Practices.
Integration and Best Practices
By integrating SciChart.js directly with JavaScript, this example establishes a modular and maintainable approach without the overhead of additional frameworks. Developers can get started quickly by following guidance from the Tutorial 01 - Including SciChart.js in an HTML Page using CDN. Furthermore, the in-code styling method promotes a clear separation between configuration and presentation, ensuring that chart appearance can be easily updated without altering core functionality. For those interested in expanding the customization further, the Chart Styling - Creating a Custom Theme documentation provides additional insights on applying custom color schemes and theme settings.
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
Using Theme Manager in JavaScript Chart
Demonstrates our Light and Dark Themes for JavaScript Charts with SciChart.js ThemeManager API
Create a Custom Theme for JavaScript Chart
Demonstrates how to create a Custom Theme for a SciChart.js JavaScript Chart using our Theming 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.