Skip to content

Vizzu / Modules / vizzu / Styles

Namespace: Styles

vizzu.Styles

Interfaces

Type Aliases

Angle

Ƭ Angle: `${number}rad` | `${number}grad` | `${number}deg` | `${number}turn` | number

Angle can be set in radians, degrees, gradians and turns. Radians is the default unit.


Color

Ƭ Color: `#${string}` | `rgb(${number},${number},${number})` | `rgba(${number},${number},${number},${number})`

The following CSS color formats are available: rgb(), rgba(), #RRGGBB,

RRGGBBAA, #RGB.


ColorGradient

Ƭ ColorGradient: ColorStop | `${ColorStop},${ColorStop}` | `${ColorStop},${ColorStop},${ColorStop}` | `${ColorStop},${ColorStop},${ColorStop},${ColorStop}` | `${ColorStop},${ColorStop},${ColorStop},${ColorStop},${ColorStop}` | string

Color gradient is specified by a comma separated list of ColorStops. This is used when a measure is on the color channel.


ColorPalette

Ƭ ColorPalette: Color | `${Color} ${Color}` | `${Color} ${Color} ${Color}` | `${Color} ${Color} ${Color} ${Color}` | `${Color} ${Color} ${Color} ${Color} ${Color}` | string

Color palette is a list of colors separated by spaces. This is used when only dimensions are on the color channel


ColorStop

Ƭ ColorStop: `${Color} ${number}`

Color and position pairs separated by spaces, where position is a number between 0 and 1.


ColorTransform

Ƭ ColorTransform: `color(${Color})` | `lightness(${number})` | `grayscale(${number})` | `opacity(${number})` | "none"

The following CSS like filters can be used to alter the color:

  • color: overrides the color.
  • lightness: lightens or darkens the color; 0 means the original color, -1 means black, 1 means white.
  • grayscale: desaturates the color. 0 means the original color, 1 means fully desaturated.

none: no change.


Label

Ƭ Label: Padding & Font & Text


Length

Ƭ Length: `${number}px` | `${number}%` | `${number}em` | number

Length can be set in pixels or in percentage of the element or the element's font size. Pixel is the default unit.


NumberScale

Ƭ NumberScale: "SISymbol" | "shortScaleSymbolUS" | "shortScaleSymbolUK" | `${string},${string}` | `${string},${string},${string}` | `${string},${string},${string},${string}` | `${string},${string},${string},${string},${string}` | string

Number scale for human readable big number formats. There are built in formats:

  • SI Symbols: k, M, G, ...
  • Short scale with US abbreviations: K, M, B, T
  • Short scale with UK abbreviations: k, m, bn, tn Can be set to custom format with a comma separated list of strings e.g: 'thousand,million,billion,trillion'