Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface IThemeProvider

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

The ThemeProvider has properties to define a theme within SciChart's 2D & 3D Charts

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 built-in dark theme
const sciChartSurface: SciChartSurface;
sciChartSurface.applyTheme(new SciChartJSDarkTheme());
// Or light theme
sciChartSurface.applyTheme(new SciChartJSLightTheme());

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

sciChartSurface.applyTheme(new MyCustomTheme());

Hierarchy

  • IThemeProvider

Implemented by

Index

Properties

Methods

Properties

Optional annotationSelectionStroke

annotationSelectionStroke: string

The AnnotationBase selection box stroke color as an HTML color code

annotationsGripsBackroundBrush

annotationsGripsBackroundBrush: string

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

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

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

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

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

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

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

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

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

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

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: TGradientStop[]

The default UniformHeatmapRenderableSeries color-map gradient stops

downBandSeriesFillColor

downBandSeriesFillColor: string

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

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

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

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)```

Optional fillPalette

fillPalette: string[] | TGradientStop[]

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

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

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)```

Optional impulseFillBrush

impulseFillBrush: string

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)```

Optional isLightBackground

isLightBackground: boolean

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

labelBackgroundBrush

labelBackgroundBrush: string

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

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

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

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

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

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

loadingAnimationForeground

loadingAnimationForeground: string

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

majorGridLineBrush

majorGridLineBrush: string

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

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

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

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)```

overviewFillBrush

overviewFillBrush: string

planeBorderColor

planeBorderColor: string

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

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

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

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

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

scrollbarBorderBrush

scrollbarBorderBrush: string

scrollbarGripsBackgroundBrush

scrollbarGripsBackgroundBrush: string

scrollbarViewportBackgroundBrush

scrollbarViewportBackgroundBrush: string

scrollbarViewportBorderBrush

scrollbarViewportBorderBrush: string

shadowEffectColor

shadowEffectColor: string

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)```

Optional strokePalette

strokePalette: string[] | TGradientStop[]

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

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

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

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)```

upBandSeriesFillColor

upBandSeriesFillColor: string

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

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

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

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

Optional getFillColor

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

  • get a color from the fillPalette, either directly (if max is less than fillPalette length) or by interpolation

    Parameters

    • index: number
    • max: number
    • wasmContext: TSciChart

    Returns string

Optional getStrokeColor

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

  • get a color from the strokePalette, either directly (if max is less than strokePalette length) or by interpolation

    Parameters

    • index: number
    • max: number
    • wasmContext: TSciChart

    Returns string

Generated using TypeDoc