Chartbreaker
    Preparing search index...

    Class gfx

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

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

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

      Parameters

      • font: string

      Returns number

    • draw one frame of a radial "ajax spinner" activity indicator: segments arranged around a circle, each fading in opacity the further it trails behind the current step

      Parameters

      • context: CanvasRenderingContext2D
      • cx: number

        the center x coordinate

      • cy: number

        the center y coordinate

      • radius: number
      • segments: number

        the number of segments around the circle

      • style: { [key: string]: any }

        uses 'border-color' for the segment underlay and 'line-color' for the fading segments

      • step: number

        animation phase; initially should be zero, later pass in the return value when drawing again

      Returns number

      the advanced step to pass into the next call

    • 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

    • draw an animated group of outlined candlesticks moving up and down in a staggered wave

      does not clear the previous frame itself: the caller is expected to fill the surface with an opaque background color before each call

      Parameters

      • context: CanvasRenderingContext2D
      • cx: number

        the center x coordinate

      • cy: number

        the center y coordinate

      • size: number

        width and height of the candle group

      • style: { [key: string]: string }

        uses 'line-color' for the candle outlines

      • step: number

        animation phase; a full wave cycle corresponds to an increase by 1

      Returns 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

    • 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

    • Parameters

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

      Returns 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

    • 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

    • 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

    • 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

    • Parameters

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

      Returns void

    • Parameters

      Returns number

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

      Returns number

    Settings
    Member Visibility

    On This Page
    Constructors
    Methods