Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SciChartJSLightTheme

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

An implementation of ThemeProvider which provides a light 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 = "#FFFFFF33"

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 = "#232323FF"

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 = "#33333333"

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 = "#AAAAAA09"

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 = "#777777FF"

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 = "#777777FF"

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 = "#777777FF"

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 = "#777777FF"

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 = "#33333355"

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 = "#E26565A0"

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 = "#E26565FF"

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 = "#E26565D0"

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 = "#E26565FF"

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[] = ["#F4842077", "#AE408E77", "#30BC9A77", "#209FD977", "#264B9377"]

An array of color codes (or GradientStops if you want to control the gaps between colors) which will be used to provide fill colors.

gridBackgroundBrush

gridBackgroundBrush: string = "#05333377"

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 = "#33333399"

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 = "#777777FF"

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 = true

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

labelBackgroundBrush

labelBackgroundBrush: string = "#D0D0D0BB"

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 = "#33333377"

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 = "#555555FF"

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 = "#33333333"

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 = "#777777FF"

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 = "#F9F9F9FF"

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

loadingAnimationForeground

loadingAnimationForeground: string = "#777777FF"

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

majorGridLineBrush

majorGridLineBrush: string = "#CFCFCFFF"

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 = "#CFCFCF77"

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 = "#76B7E2B4"

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 = "#777777FF"

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 = "#33333322"
inheritdoc

planeBorderColor

planeBorderColor: string = "#EEEEEEFF"

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 = "#33333333"

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 = "#33333333"

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 = "#33333377"

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 = "#F9F9F9FF"

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 = "#33333322"
inheritdoc

scrollbarBorderBrush

scrollbarBorderBrush: string = "#12121255"
inheritdoc

scrollbarGripsBackgroundBrush

scrollbarGripsBackgroundBrush: string = "#FFFFFF66"
inheritdoc

scrollbarViewportBackgroundBrush

scrollbarViewportBackgroundBrush: string = "#FFFFFF44"
inheritdoc

scrollbarViewportBorderBrush

scrollbarViewportBorderBrush: string = "#12121255"
inheritdoc

shadowEffectColor

shadowEffectColor: string = "#A0AABAFA"

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[] = ["#F48420", "#AE408E", "#30BC9A", "#209FD9", "#264B93"]

An array of color codes (or GradientStops if you want to control the gaps between colors) which will be used to provide stroke colors.

textAnnotationBackground

textAnnotationBackground: string = "#FFFFFFFF"

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 = "#000000FF"

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 = "#333333FF"

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.Light
inheritdoc

upBandSeriesFillColor

upBandSeriesFillColor: string = "#52CC5490"

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 = "#52CC54FF"

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 = "#52CC54A0"

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 = "#52CC54FF"

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