Vizzu / Modules / types/styles

Module: types/styles

Interfaces

• Axis
• AxisLabel
• AxisTitle
• Box
• Chart
• DataPoint
• Font
• Guides
• Interlacing
• Legend
• LegendMarker
• Logo
• Marker
• MarkerLabel
• OrientedLabel
• Padding
• Plot
• Text
• Ticks
• Tooltip

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

Represents a Label.

---

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

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'