Class CartesianCanvasPlot

Simple plotting of cartesian values.

Create a plot that fills screen

const p = Plot.insert({fill`viewport});
const dataSet = p.dataSet;

// Add data
ds.add({ x: 1, y: 2 });

// Draw
p.draw();

Create a plot that fills a container

const p = Plot.insert({parent:`#someel`});

Add data using the created data set


// Add a value to the `alpha` series
p.dataSet.add({x:1,y:1}, `alpha`);

Set default series formatting

p.setMeta(`default`, {
 colour: `hsl(50,100%,50%)`,
 lineWidth: 10
});

Series can have metadata associated with it in the DataSet

// Use 'pink' by default for the series 'alpha'
p.setMeta(`alpha`, { colour: `pink` });

Constructors

constructor

Properties

actualDataRange axisRounder onInvalidated overlayLines show visibleRange whiskerLength

Accessors

canvasRegion canvasSource dataSet

Methods

draw drawLine getCurrentRange getDataRange getDefaultMeta invalidateRange pointToValue positionElementAt setMeta valueToRegionSpace valueToScreenSpace

Constructors

constructor

Properties

actualDataRange

actualDataRange: RectPositioned = Rects.EmptyPositioned

axisRounder

axisRounder: ((v: number) => number) = ...

onInvalidated

onInvalidated: undefined | (() => void)

overlayLines

overlayLines: (Line & LineStyle)[] = []

List of lines to draw after drawing everything else. Lines are given in value-coordinate space

show

show: ShowOptions

visibleRange

visibleRange: RectPositioned = Rects.PlaceholderPositioned

whiskerLength

whiskerLength: number

Accessors

canvasRegion

canvasSource

dataSet

Methods

draw

  • draw(): void

  • Returns void

drawLine

  • drawLine(line, colour, width): void

  • Draws a line in value-coordinate space

    Parameters

    • line: Line
    • colour: string
    • width: number

    Returns void

getCurrentRange

getDataRange

  • getDataRange(): PointMinMax

  • When range is auto, returns the range of the data Otherwise returns the user-provided range.

    Returns PointMinMax

getDefaultMeta

invalidateRange

  • invalidateRange(): void

  • Returns void

pointToValue

  • pointToValue(point, _source): Point

  • Converts a point in pixel coordinates to a value. Useful for converting from user input coordinates.

    Parameters

    • point: Point
    • _source: "screen"

    Returns Point

positionElementAt

  • positionElementAt(data, elementToPosition, by?, relativeToQuery?): void

  • Positions an element at the viewport location of data point. Ensure the element has position:absolute set.

    Parameters

    • data: Point
    • elementToPosition: string | HTMLElement
    • by: "middle" | "top-left" = ...
    • OptionalrelativeToQuery: string | HTMLElement

    Returns void

setMeta

  • setMeta(series, meta): void

  • Parameters

    Returns void

valueToRegionSpace

  • valueToRegionSpace(dataValue, debug?): {
        x: number;
        y: number;
        z?: number;
    }

  • Parameters

    • dataValue: Point
    • debug: boolean = false

    Returns {
        x: number;
        y: number;
        z?: number;
    }

    • x: number
    • y: number
    • Optional Readonlyz?: number

valueToScreenSpace

  • valueToScreenSpace(dataPoint): {
        x: number;
        y: number;
    }

  • Parameters

    Returns {
        x: number;
        y: number;
    }

    • x: number
    • y: number

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods