Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SciChartJSDarkTheme

Go to JavaScript Charting Documentation
Go to JavaScript Chart Examples
Go to SciChart.js on Github

An implementation of ThemeProvider which provides a dark theme

decription

Applied to a 2D SciChartSurface, or a 3D SciChart3DSurface, the ThemeProvider may be applied using the applyTheme method, where it is passed down to child components so that all children of the chart get the same theme.

For example:

// Applying a theme when creating a chart
const { sciChartSurface, wasmContext } = SciChartSurface.create("div-id", { theme: new SciChartJSDarkTheme() });
// Apply a theme after chart creation
sciChartSurface.applyTheme(new SciChartJSDarkTheme());

// Applying a custom theme
export class MyCustomTheme implements IThemeProvider {
   // todo: implement IThemeProvider interface and apply properties
}

sciChartSurface.applyTheme(new MyCustomTheme()); // Or apply in SciChartSurface.create()

// Overriding just some members of a theme
const myOverriddenTheme = {...new SciChartJSLightTheme(), sciChartBackground: "white" };
ciChartSurface.applyTheme(myOverriddenTheme); // Or apply in SciChartSurface.create()

Hierarchy

Implements

Index

Properties

Methods

Properties

annotationSelectionStroke

annotationSelectionStroke: string = "#f00e0e66"

The AnnotationBase selection box stroke color as an HTML color code

annotationsGripsBackroundBrush

annotationsGripsBackroundBrush: string = "#CDCDCD22"

The AnnotationBase grips background color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

annotationsGripsBorderBrush

annotationsGripsBorderBrush: string = "#CDCDCD99"

The AnnotationBase grips border color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

axis3DBandsFill

axis3DBandsFill: string = "#202123E1"

The default 3D Chart Axis Bands fill color applied as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

axisBandsFill

axisBandsFill: string = "#202123E1"

The Axis Bands fill brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

axisBorder

axisBorder: string = "#00000000"

The default 2D Chart Axis Border Color color applied as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

axisPlaneBackgroundFill

axisPlaneBackgroundFill: string = "TRANSPARENT"

The default 3D Chart Axis Plane background color applied as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

axisTitleColor

axisTitleColor: string = "#C8C7C3FF"

The default Axis Title color applied as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

chartTitleColor

chartTitleColor: string = "#C8C7C3FF"

The default Chart Title color applied as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

columnFillBrush

columnFillBrush: string = "#FFFFFFFF"

The default FastColumnRenderableSeries fill brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

columnLineColor

columnLineColor: string = "#FFFFFFFF"

The default FastColumnRenderableSeries stroke brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

cursorLineBrush

cursorLineBrush: string = "#228B22FF"

The Cursor Line brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

defaultColorMapBrush

defaultColorMapBrush: { color: string; offset: number }[] = [{ offset: 0, color: "DARKBLUE" },{ offset: 0.5, color: "CORNFLOWERBLUE" },{ offset: 1, color: "#FF22AAFF" }]

The default UniformHeatmapRenderableSeries color-map gradient stops

downBandSeriesFillColor

downBandSeriesFillColor: string = "#FF191933"

The default FastBandRenderableSeries down band fill color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

downBandSeriesLineColor

downBandSeriesLineColor: string = "#FF1919FF"

The default FastBandRenderableSeries down line color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

downBodyBrush

downBodyBrush: string = "#ff5050B2"

The default FastCandlestickRenderableSeries down body color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

downWickColor

downWickColor: string = "#ff5050FF"

The default FastCandlestickRenderableSeries down-wick color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

fillPalette

fillPalette: string[] | TGradientStop[] = []

gridBackgroundBrush

gridBackgroundBrush: string = "TRANSPARENT"

The Grid area background brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

gridBorderBrush

gridBorderBrush: string = "#5A5B5BFF"

The Grid border brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

impulseFillBrush

impulseFillBrush: string = "#FFFFFFFF"

The default FastImpulseRenderableSeries fill brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

isLightBackground

isLightBackground: boolean = false

Tells SciChart if the theme has a light or dark background (used for calculating contrasting elements)

labelBackgroundBrush

labelBackgroundBrush: string = "#42b649AA"

The Axis label background brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

labelBorderBrush

labelBorderBrush: string = "#42b649FF"

The Axis label border brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

labelForegroundBrush

labelForegroundBrush: string = "#EEEEEEFF"

The Axis label foreground font color brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

legendBackgroundBrush

legendBackgroundBrush: string = "#1D2C35FF"

The SciChartLegend background brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

lineSeriesColor

lineSeriesColor: string = "#C6E6FFFF"

The default FastLineRenderableSeries line stroke brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

loadingAnimationBackground

loadingAnimationBackground: string = "#1C1C1EFF"

The background color of the loading animation dots, which can also be customized by overriding the loader

loadingAnimationForeground

loadingAnimationForeground: string = "#AAA"

The foreground color of the loading animation dots, which can also be customized by overriding the loader

majorGridLineBrush

majorGridLineBrush: string = "#323539FF"

The Major Gridlines brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

minorGridLineBrush

minorGridLineBrush: string = "#232426FF"

The Minor Gridlines brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

mountainAreaBrush

mountainAreaBrush: string = "#4083B777"

The default FastMountainRenderableSeries mountain fill brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

mountainLineColor

mountainLineColor: string = "#C6E6FFFF"

The default FastMountainRenderableSeries mountain line brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

Protected overrides

overrides: IThemePartial

overviewFillBrush

overviewFillBrush: string = "#262728BB"
inheritdoc

planeBorderColor

planeBorderColor: string = "#333333FF"

The default 3D Chart Axis Plane border color applied as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

rolloverLineBrush

rolloverLineBrush: string = "#42b64933"

The RolloverModifier line brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

rubberBandFillBrush

rubberBandFillBrush: string = "#42b64933"

The RubberBandXyZoomModifier recticule fill brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

rubberBandStrokeBrush

rubberBandStrokeBrush: string = "#42b64977"

The RubberBandXyZoomModifier recticule stroke brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

sciChartBackground

sciChartBackground: string = "#1C1C1EFF"

The Background color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

scrollbarBackgroundBrush

scrollbarBackgroundBrush: string = "#262728FF"
inheritdoc

scrollbarBorderBrush

scrollbarBorderBrush: string = "#121212FF"
inheritdoc

scrollbarGripsBackgroundBrush

scrollbarGripsBackgroundBrush: string = "#535353FF"
inheritdoc

scrollbarViewportBackgroundBrush

scrollbarViewportBackgroundBrush: string = "#222222FF"
inheritdoc

scrollbarViewportBorderBrush

scrollbarViewportBorderBrush: string = "#232323FF"
inheritdoc

shadowEffectColor

shadowEffectColor: string = "#000000FF"

The default shadow effect color applied to drop-shadows

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

strokePalette

strokePalette: string[] | TGradientStop[] = []

textAnnotationBackground

textAnnotationBackground: string = "#42b649AA"

The TextAnnotation background color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

textAnnotationForeground

textAnnotationForeground: string = "#EEEEEEFF"

The TextAnnotation font color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

tickTextBrush

tickTextBrush: string = "#A6A7ACFF"

The Tick Text brush as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

type

type: EThemeProviderType = EThemeProviderType.Dark
inheritdoc

upBandSeriesFillColor

upBandSeriesFillColor: string = "#279B2733"

The default FastBandRenderableSeries up band fill color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

upBandSeriesLineColor

upBandSeriesLineColor: string = "#279B27FF"

The default FastBandRenderableSeries up line color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

upBodyBrush

upBodyBrush: string = "#50ff50B2"

The default FastCandlestickRenderableSeries up body color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

upWickColor

upWickColor: string = "#50ff50FF"

The default FastCandlestickRenderableSeries up-wick color as an HTML color code

remarks

Acceptable values include RGB format e.g. #FF0000, RGBA format e.g. #FF000077`` and RGBA format e.g.rgba(255,0,0,0.5)```

Methods

applyOverrides

getFillColor

  • getFillColor(index: number, max: number, wasmContext: TSciChart): string

getStrokeColor

  • getStrokeColor(index: number, max: number, wasmContext: TSciChart): string

toJSON

  • toJSON(): { type: string }

  • Returns { type: string }

    • type: string

Generated using TypeDoc