SciChart.js JavaScript 2D Charts API > Styling and Theming > Chart Styling - ThemeManager API
Chart Styling - ThemeManager API

SciChart ships with a light and dark theme out of the box, which you can select and apply to the charts in your application. Most of the components of SciChart are also stylable, and you can create your own themes, so you can truly customize the chart to fit your application.

You can view our themes live at the ThemeManager example, over at the SciChart.js Examples Suite.

SciChart Dark Theme

SciChart had a dark theme before dark-mode was cool :) Here's our default theme, SciChart Dark, in all it's glory below.

import { SciChartSurface } from "scichart";
import { SciChartJSDarkv2Theme } from "scichart/Charting/Themes/SciChartJSDarkv2Theme";

sciChartSurface.applyTheme(new SciChartJSDarkv2Theme());

SciChart Light Theme

For applications with a white or lighter background color, we also ship a light theme. This is how it looks:

import { SciChartSurface } from "scichart";
import { SciChartJSLightTheme} from "scichart/Charting/Themes/SciChartJSLightTheme";

sciChartSurface.applyTheme(new SciChartJSLightTheme());

     

 

See Also