Style

Overview

The Visual's styles. Used to access the styles object and its theme configurations for styling the custom visual.

  • From version: 2020.20

Properties

backgroundColor

backgroundColor: string

Background Color that was defined for the visual in the chosen theme. 

const background = cvApi2.canvas.style.backgroundColor;

fontColor

fontColor: string

Font color that was defined for the visual in the chosen theme. 

const fontColor = cvApi2.canvas.style.fontColor;

fontFamily

fontFamily: string

Font family that was defined for the visual in the chosen theme. 

const fontFamily = cvApi2.canvas.style.fontFamily;

fontSize

fontSize: string

Font size that was defined for the visual in the chosen theme. 

const fontSize = cvApi2.canvas.style.fontSize;

fontStyle

fontStyle: string

Font style that was defined for the visual in the chosen theme. 

const fontStyle = cvApi2.canvas.style.fontStyle;

fontWeight

fontWeight: string

Font weight that was defined for the visual in the chosen theme. 

const fontWeight = cvApi2.canvas.style.fontWeight;

lineColor

lineColor: string

Line color that was defined for the visual in the chosen theme. 

const lineColor = cvApi2.canvas.style.lineColor;

pyramidThemeStyle

pyramidThemeStyle: IStyleData

The internal theme style object. Contains all theme styling properties as defined in Pyramid's theme editor. Use this to access all the (deep) styling properties that are not accessible from the API's simpler (and direct) style objects and properties. 

const styles = cvApi2.canvas.style.pyramidThemeStyle;
const backgroundColor = styles.visuals.visualsGeneral.background;

themeBackgroundColor

themeBackgroundColor: string

Theme background Color that was defined for the visual in the chosen theme. 

const themeBackground = cvApi2.canvas.style.themeBackgroundColor;

Methods

getRangeColors

getRangeColors ( colorRangeType : ColorRangeType ): string[]

A function for getting range of colors that have a representation in the theme. Can be used for coloring bands or indicate between chronological phases. It is useful when styling the visual with the user's chosen theme. 

const colors = cvApi2.canvas.style.getRangeColors(cvApi2.enums.events.ColorRangeType.Dual);

Parameters

  • colorRangeType:ColorRangeType

    An enum that represent the type of color range that is needed.

Returns string[]

Range of colors that have a representation in the theme.

getThemeColorByIndex

getThemeColorByIndex ( index : number): string

A function to return one of the 16 core theme colors. It is useful when styling the visual with the user's chosen theme. 

const firstColorInTheme = cvApi2.canvas.style.getThemeColorByIndex(0);

Parameters

  • index:number

    The location of the color in the theme colors list (0-15).

Returns string

Represent the selected color.