Class gfx

a collection of graphics and drawing related utility functions used by the chart classes

Constructors

constructor

Methods

approximateLineHeight drawActivityIndicator drawBorder drawEllipse drawHorizontalArrow drawHorizontalMarker drawLineWithStyle drawRoundRect drawTooltip drawTooltipWithLineWrap drawVerticalArrow drawVerticalMarker fillTextWithLineWrap pixelRatio

Constructors

constructor

Methods

StaticapproximateLineHeight

  • approximateLineHeight(font: string): number

  • get approximate line height from css font definition currently only supports px and pt

    Parameters

    • font: string

    Returns number

StaticdrawActivityIndicator

  • drawActivityIndicator(
        context: BGContext,
        cx: number,
        cy: number,
        radius: number,
        segments: number,
        style: { [key: string]: any },
        step: number,
    ): number

  • draw activity indicator

    Parameters

    • context: BGContext
    • cx: number
    • cy: number
    • radius: number
    • segments: number
    • style: { [key: string]: any }
    • step: number

      initially should be zero; later pass in return value when drawing again

    Returns number

StaticdrawBorder

  • drawBorder(
        ctx: BGContext,
        x: number,
        y: number,
        w: number,
        h: number,
        style: { [key: string]: any },
        outside?: boolean,
        maxX?: number,
        maxY?: number,
    ): void

  • Draws a border using the specified object style configuration

    Parameters

    • ctx: BGContext
    • x: number

      The top left x coordinate

    • y: number

      The top left y coordinate

    • w: number

      The width of the rectangle

    • h: number

      The height of the rectangle

    • style: { [key: string]: any }
    • Optionaloutside: boolean
    • OptionalmaxX: number
    • OptionalmaxY: number

    Returns void

StaticdrawEllipse

  • drawEllipse(
        context: BGContext,
        cx: number,
        cy: number,
        width: number,
        height: number,
    ): void

  • draw an ellipse

    Parameters

    • context: BGContext
    • cx: number

      the center x coordinate

    • cy: number

      the center y coordinate

    • width: number
    • height: number

    Returns void

StaticdrawHorizontalArrow

  • drawHorizontalArrow(
        context: BGContext,
        x: number,
        y: number,
        width?: number,
        height?: number,
        right?: boolean,
    ): void

  • draw a simple triangular arrow

    Parameters

    • context: BGContext
    • x: number

      The top left x coordinate

    • y: number

      The top left y coordinate

    • Optionalwidth: number
    • Optionalheight: number
    • Optionalright: boolean

      should the arrow be facing right or left?

    Returns void

StaticdrawHorizontalMarker

  • drawHorizontalMarker(
        context: BGContext,
        x: number,
        y: number,
        h: number,
        dir: number,
        value: string,
        color: string,
        textColor: null | string,
        font: string,
    ): void

  • Parameters

    • context: BGContext
    • x: number
    • y: number
    • h: number
    • dir: number
    • value: string
    • color: string
    • textColor: null | string
    • font: string

    Returns void

StaticdrawLineWithStyle

  • drawLineWithStyle(
        context: BGContext,
        x: number,
        y: number,
        x2: number,
        y2: number,
        style: ELineType | "dotted" | "default" | "dashed",
        shift?: number,
    ): void

  • draw line with specified style

    Parameters

    • context: BGContext
    • x: number
    • y: number
    • x2: number
    • y2: number
    • style: ELineType | "dotted" | "default" | "dashed"
    • Optionalshift: number

    Returns void

StaticdrawRoundRect

  • drawRoundRect(
        ctx: BGContext,
        x: number,
        y: number,
        width: number,
        height: number,
        radius?: number,
        fill?: boolean,
        stroke?: boolean,
    ): void

  • Draws a rounded rectangle using the current state of the canvas. If you omit the last three params, it will draw a rectangle outline with a 5 pixel border radius

    Parameters

    • ctx: BGContext
    • x: number

      The top left x coordinate

    • y: number

      The top left y coordinate

    • width: number

      The width of the rectangle

    • height: number

      The height of the rectangle

    • Optionalradius: number

      The corner radius. Defaults to 5;

    • Optionalfill: boolean

      Whether to fill the rectangle. Defaults to false.

    • Optionalstroke: boolean

      Whether to stroke the rectangle. Defaults to true.

    Returns void

StaticdrawTooltip

  • drawTooltip(
        context: BGContext,
        rx: number,
        ry: number,
        rw: number,
        rh: number,
        text: string,
        style: { [key: string]: any },
        bounds: Bounds,
    ): void

  • draw a tooltip with originating from the supplied rectangle,

    Parameters

    • context: BGContext
    • rx: number

      upper left x coordinate

    • ry: number

      upper left y coordinate

    • rw: number

      width of rectangle

    • rh: number

      height of rectangle

    • text: string
    • style: { [key: string]: any }
    • bounds: Bounds

      optional bounds limiting the area to draw in

    Returns void

StaticdrawTooltipWithLineWrap

  • drawTooltipWithLineWrap(
        context: BGContext,
        text: string,
        x: number,
        y: number,
        maxWidth: number,
        style: {
            "background-color": string;
            "border-color": string;
            "text-color": string;
        },
        bounds: Bounds,
    ): void

  • Parameters

    • context: BGContext
    • text: string
    • x: number
    • y: number
    • maxWidth: number
    • style: { "background-color": string; "border-color": string; "text-color": string }
    • bounds: Bounds

    Returns void

StaticdrawVerticalArrow

  • drawVerticalArrow(
        context: BGContext,
        x: number,
        y: number,
        width?: number,
        height?: number,
        up?: boolean,
    ): void

  • draw a simple triangular arrow

    Parameters

    • context: BGContext
    • x: number

      The top left x coordinate

    • y: number

      The top left y coordinate

    • Optionalwidth: number
    • Optionalheight: number
    • Optionalup: boolean

      should the arrow be facing up or down?

    Returns void

StaticdrawVerticalMarker

  • drawVerticalMarker(
        context: BGContext,
        x: number,
        y: number,
        w: number,
        dir: number,
        value: string,
        color: string,
        textColor: null | string,
        font: string,
    ): void

  • Parameters

    • context: BGContext
    • x: number
    • y: number
    • w: number
    • dir: number
    • value: string
    • color: string
    • textColor: null | string
    • font: string

    Returns void

StaticfillTextWithLineWrap

  • fillTextWithLineWrap(
        context: BGContext,
        text: string,
        x: number,
        y: number,
        maxWidth: number,
        calculateOnly?: boolean,
    ): number

  • Parameters

    • context: BGContext
    • text: string
    • x: number
    • y: number
    • maxWidth: number
    • OptionalcalculateOnly: boolean

    Returns number

StaticpixelRatio

  • pixelRatio(view?: any): number

  • retrieve pixel ratio zoom level is taken into account on most browsers

    Parameters

    • Optionalview: any

    Returns number

Settings

Member Visibility

On This Page

Constructors
Methods