constructor

• new Style(
      style?: null | string,
      overwrites?: null | { selector: string; values: { [key: string]: any } }[],
  ): Style

  The Style object basically works like a CSS-Stylesheet for charts. It can contain style information for all kinds of objects contained in a BG.charts.ChartSet such as a BG.charts.Chart, a BG.charts.Layer, or a BG.charts.Tool

  Selectors

  Similar to CSS, it supports simple selectors - matched right to left - for objects based on "tagnames", "classes" and "ids". For example the selector "chart indicator.RSI layer.line" matches all following stylesheet definitions: ".RSI .line" "indicator .line" "chart .RSI layer.line" "layer"

  Stylesheet Definitions

  Stylesheets are represented in a simple JSON syntax. They are referenced via an alphanumeric id that is used to load the actual stylesheet. Loading logic must be implemented by passing a loader to BG.charts.Style.setLoader.

  Each entry in a stylesheet is identifier by a selector string; multiple individual selectors can be separated by commas just like in CSS, forming one large selector. In addition to the selector, the entry can then contain an object with several properties and values. Definitions are matched in the order provided by the stylesheet. If multiple definitions match a single selector, the later definitions overwrite the previous ones.

         [
             {
                 "selector": "chartset",
                 "values": {
                     "background-color": "#fff"
                 }
             },
             {
                 "selector": "chart indicator.RSI layer.line, .CCI .line",
                 "values": {
                     "line-color": "#f00"
                 }
             },
             {
                  "selector": "marker",
                 "values": {
                     "font": "normal 11px arial"
                 }
             },
             {
                 "selector": "chart#volume layer",
                 "values": {
                     "line-color": "#fff"
                 }
             }
         ]
  Copy

  For a comprehensive example see the guide on stylesheets, or the specific property listings in the documentation of the various objects using the style subsystem.

  Palettes

  Palettes are sets of color definitions that can be used to populate color pickers with some easy predefined choices in the user interface. By default, BG.charts.Style contains defaults for all available palettes:

  • lines
  • stroke
  • fill
  • border

  However, palettes can also be changed using stylesheets. To define custom palettes, the reserved selector "palettes" is used:

         {
             "palettes" : {
                 "lines" : [
                     "#ffcf00", "#807b79", "#299dc3", "#696185",
                     "#904583", "#658955", "#895555", "#9d9991"
                 ]
             }
         }
  Copy

  Automatically Assigned Line Colors

  If the used stylesheet does not specify fixed values for the line-color property of layer.line, this property is assigned automatically so that no color is used twice in a single chart. The colors are selected from the 'lines' palette.

  Parameters

  • Optionalstyle: null | string
  • Optionaloverwrites: null | { selector: string; values: { [key: string]: any } }[]

  Returns Style

valueTypes

acquireLineColor

• acquireLineColor(
      context?: null | string,
      palette?: null | string,
      presetColor?: null | string,
  ): null | string

  returns a line color, and flags that color as used

  Parameters

  • Optionalcontext: null | string
  • Optionalpalette: null | string
  • OptionalpresetColor: null | string

  Returns null | string

getPalette

• getPalette(identifier: string): string[]

  makes the released line color available again

  Parameters

  • identifier: string

  Returns string[]

getStyle

• getStyle(
      selector: string,
      definitions?: { [key: string]: any },
  ): { [key: string]: any }

  returns the style matching the specified selector optionally a set of default values can be provided that are used when the current style does not contain any values for the respective keys

  Parameters

  • selector: string
  • Optionaldefinitions: { [key: string]: any }

  Returns { [key: string]: any }

getStyles

• getStyles(): null | { selector: string; values: { [key: string]: any } }[]

  returns an object containing all stored styles

  Returns null | { selector: string; values: { [key: string]: any } }[]

getTextColor

• getTextColor(color: string): string

  returns a suitable text color for use on a background of the specified color implementation first checks if a text color is specified in the style, otherwise it uses BG.charts.Color.getTextColor

  Parameters

  • color: string

  Returns string

load

• load(callback?: (param: Style) => any): boolean

  load a stylesheet

  Parameters

  • Optionalcallback: (param: Style) => any

  Returns boolean

releaseLineColor

• releaseLineColor(color: string, context?: null | string): void

  makes the released line color available again

  Parameters

  • color: string
  • Optionalcontext: null | string

  Returns void

StaticsetLoader

• setLoader(
      loader: (param1: string, param2: (p1: any, p2: object) => any) => any,
  ): void

  Parameters

  • loader: (param1: string, param2: (p1: any, p2: object) => any) => any

  Returns void