Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including plot-grid with all npm packages installed. Try it out:

var plotGrid = require("plot-grid")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

plot-grid v2.4.2

Plot grid component

plot-grid unstable gzip-size

Grid component for webgl/canvas2d with zooming, panning, polar mode etc. See demo.


npm install plot-grid

const createGrid = require('plot-grid');

//cartesian grid
let grid = createGrid({
    x: {
        type: 'logarithmic',
        min: 0
    y: {
        min: -100,
        max: 0

This will create frequency response and directional diagram.


let grid = new Grid(options?)

Create new grid instance. It can serve both as a class or constructor function (no new). By default it displays cartesian grid, but

containerdocument.bodyContainer to place grid into. Can be null to render in memory.
contextnullCan be pre-existing context.
pixelRatiowindow.devicePixelRatioPixel ratio of canvas.
autostarttrueRender every frame automatically or call render method manually. Useful if plot-grid is used in cooperation with other components.
interactionstrueEnable pan/zoom interactions, see interact event.
x, y, r, aBool, String, ObjectBoolean, enabling coordinates of linear type or a string, defining custom type: linear, logarithmic or time. If object is passed, it defines custom lines behaviour, see the table below.

Each of x, y, r, a can be customized by the following options:

typeString, nullnullDefault type to extend, one of linear, logarithmic, time.
colorStringrgba(0,0,0,1)Default color for the lines, axes, ticks and labels.
formatFunctionnullFormatter for label values. Takes a value and returns a string. pretty-number can be used as such.
linesBool, Array, Function, nullArray with values, defining lines, or function returning such array, state => [values...]. Can be disabled by passing false. By default implemented by type.
ticksBool, Array, Number, Function5Tick size. Can be disabled by passing false.
labelsBool, Array, Object , Function, nullnullObject or array with labels corresponding to lines. Can be defined as a function returning such array (state) => labels. null value will output values as is. Can be disabled by passing false.
axisBooltrueEnable axis.

Pan & zoom

Additional pan/zoom params can be set for each coordinate x, y, r, a:

offsetNumber0Defines start point for the visible range, in terms of values.
originNumber0.5Defines position of the offset on the screen, for example, .5 for center, 1 for right/top edge of the screen, 0 for left/bottom.
scaleNumber1Sets scale for the current range, number of values per pixel.
min, maxNumber-Infinity, InfinityLimits for panning.
minScale, maxScaleNumber0, InfinityScale limits.
zoomBooltrueEnables zoom interaction.
panBooltrueEnables pan interaction.

To change pan or zoom, use update method with the propertives above, as update({x: {offset, scale}, y: {offset, scale});.

Another time it might be useful to engage grid.on('interact', grid => {}) handler for grid interactions, like moving and zooming.


Each coordinate can be customized more with additional options:

lineColorString, Number, Function, null.3Color for lines. Number value will take the base color above with changed opacity. Function signature is state => [...values].
lineWidthNumber1Width of lines. We guess that width of sublines should not differ from the width of lines, if you have use-case requiring the opposite, please address issues.
axisOriginNumber0Define axis alignment by value on the opposite coordinate.
axisColorString, Number0.1Axis color, redefines default color.
axisWidthNumber2Width of axis line.
alignNumber0.5The side to align ticks and labels, 0..1.
fontSizeString, Number10ptFont size for labels. Sizes with units will be automatically transformed to pixels by to-px.
fontFamilyStringsans-serifFont family to use for labels.
padding WIPNumber, Array(4)0Padding inside the viewport to indent lines from axes and labels. Ordering is top, right, bottom, left, as in css.
style WIPStringlinesStyle of rendering: lines or dots. Note that dots is available only when x and y are both enabled.
distanceNumber120Minimum distance between lines.


Pass new options to update grid look. Note that passed options extend existing ones.

    x: {
        type: 'logarithmic',
        offset: 0,
        min: 0,
        scale: .01

Note that you may need to call render in manual mode grid.update().render().


Redraw grid. Call whenever you need to redraw grid, like resize etc. It will not recalculate lines, just rerender existing lines. To recalculate lines, use grid.update().


Directly invoke draw method, useful in case if grid needs to be drawn over other content.

Used by


To @evanw with thetamath for grid API inspiration.


  • grid — collection of grids for canvas2d.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free