Class gfx

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

Index

Constructors

Methods

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

Constructors

constructor

new gfx(): gfx
Returns gfx

Methods

`Static`approximateLineHeight

approximateLineHeight(font: string): number
get approximate line height from css font definition currently only supports px and pt
Parameters
- font: string
Returns number

`Static`clipRect

clipRect(
    context: CanvasRenderingContext2D,
    x: number,
    y: number,
    w: number,
    h: number,
): void
Parameters
- context: CanvasRenderingContext2D
- x: number
- y: number
- w: number
- h: number
Returns void

`Static`drawActivityIndicator

drawActivityIndicator(
    context: CanvasRenderingContext2D,
    cx: number,
    cy: number,
    radius: number,
    segments: number,
    style: { [key: string]: any },
    step: number,
): number
draw activity indicator
Parameters
- context: CanvasRenderingContext2D
- 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

`Static`drawBorder

drawBorder(
    ctx: CanvasRenderingContext2D,
    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: CanvasRenderingContext2D
- 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

`Static`drawEllipse

drawEllipse(
    context: CanvasRenderingContext2D,
    cx: number,
    cy: number,
    width: number,
    height: number,
): void
draw an ellipse
Parameters
- context: CanvasRenderingContext2D
- cx: number
  the center x coordinate
- cy: number
  the center y coordinate
- width: number
- height: number
Returns void

`Static`drawHorizontalArrow

drawHorizontalArrow(
    context: CanvasRenderingContext2D,
    x: number,
    y: number,
    width?: number,
    height?: number,
    right?: boolean,
): void
draw a simple triangular arrow
Parameters
- context: CanvasRenderingContext2D
- 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

`Static`drawHorizontalMarker

drawHorizontalMarker(
    context: CanvasRenderingContext2D,
    x: number,
    y: number,
    h: number,
    dir: number,
    value: string,
    color: string,
    textColor: string | null,
    font: string,
): void
Parameters
- context: CanvasRenderingContext2D
- x: number
- y: number
- h: number
- dir: number
- value: string
- color: string
- textColor: string | null
- font: string
Returns void

`Static`drawLineWithStyle

drawLineWithStyle(
    context: CanvasRenderingContext2D,
    x: number,
    y: number,
    x2: number,
    y2: number,
    style: ELineStyle | "default" | "dotted" | "dashed",
    shift?: number,
): void
draw line with specified style
Parameters
- context: CanvasRenderingContext2D
- x: number
- y: number
- x2: number
- y2: number
- style: ELineStyle | "default" | "dotted" | "dashed"
- Optionalshift: number
Returns void

`Static`drawRoundRect

drawRoundRect(
    ctx: CanvasRenderingContext2D,
    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: CanvasRenderingContext2D
- 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

`Static`drawTooltip

drawTooltip(
    context: CanvasRenderingContext2D,
    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: CanvasRenderingContext2D
- 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

`Static`drawTooltipWithLineWrap

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

`Static`drawVerticalArrow

drawVerticalArrow(
    context: CanvasRenderingContext2D,
    x: number,
    y: number,
    width?: number,
    height?: number,
    up?: boolean,
): void
draw a simple triangular arrow
Parameters
- context: CanvasRenderingContext2D
- 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

`Static`drawVerticalMarker

drawVerticalMarker(
    context: CanvasRenderingContext2D,
    x: number,
    y: number,
    w: number,
    dir: number,
    value: string,
    color: string,
    textColor: string | null,
    font: string,
): void
Parameters
- context: CanvasRenderingContext2D
- x: number
- y: number
- w: number
- dir: number
- value: string
- color: string
- textColor: string | null
- font: string
Returns void

`Static`fillTextWithLineWrap

fillTextWithLineWrap(
    context: CanvasRenderingContext2D,
    text: string,
    x: number,
    y: number,
    maxWidth: number,
    calculateOnly?: boolean,
): number
Parameters
- context: CanvasRenderingContext2D
- text: string
- x: number
- y: number
- maxWidth: number
- OptionalcalculateOnly: boolean
Returns number

`Static`line

line(
    context: CanvasRenderingContext2D,
    x1: number,
    y1: number,
    x2: number,
    y2: number,
): void
Parameters
- context: CanvasRenderingContext2D
- x1: number
- y1: number
- x2: number
- y2: number
Returns void

`Static`pixelRatio

pixelRatio(): number
retrieve pixel ratio zoom level is taken into account on most browsers

Returns number

Class gfx

Index

Constructors

Methods

Constructors

constructor

Returns gfx

Methods

StaticapproximateLineHeight

Parameters

Returns number

StaticclipRect

Parameters

Returns void

StaticdrawActivityIndicator

Parameters

Returns number

StaticdrawBorder

Parameters

Returns void

StaticdrawEllipse

Parameters

Returns void

StaticdrawHorizontalArrow

Parameters

Returns void

StaticdrawHorizontalMarker

Parameters

Returns void

StaticdrawLineWithStyle

Parameters

Returns void

StaticdrawRoundRect

Parameters

Returns void

StaticdrawTooltip

Parameters

Returns void

StaticdrawTooltipWithLineWrap

Parameters

Returns void

StaticdrawVerticalArrow

Parameters

Returns void

StaticdrawVerticalMarker

Parameters

Returns void

StaticfillTextWithLineWrap

Parameters

Returns number

Staticline

Parameters

Returns void

StaticpixelRatio

Returns number

Settings

On This Page

`Static`approximateLineHeight

`Static`clipRect

`Static`drawActivityIndicator

`Static`drawBorder

`Static`drawEllipse

`Static`drawHorizontalArrow

`Static`drawHorizontalMarker

`Static`drawLineWithStyle

`Static`drawRoundRect

`Static`drawTooltip

`Static`drawTooltipWithLineWrap

`Static`drawVerticalArrow

`Static`drawVerticalMarker

`Static`fillTextWithLineWrap

`Static`line

`Static`pixelRatio