plot
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.21 • Public • Published

    plot

    The simplest and most forgiving plotting API for JavaScript and TypeScript.

    Use plot to quickly and conveniently render charts for your data. It is an abstraction layer over JavaScript visualization libraries. Currently supporting Apex Charts, but intending to support more in the future.

    Click here for the API docs

    For various examples see this repo.

    Plot can be used from Node.js, from the browser and is specially designed to integrate with Data-Forge Notebook.

    I'm after contributors to help flesh this library out! Can you help?

    Please give feedback!

    Email the author on ashley@codecapers.com.au.

    Click here to support the developer.

    Aims

    • To have a simple way to plot a chart.
    • To be an abstraction over multiple code libraries for visualization in JavaScript.
    • To have a plotting library that works well in Node.js, the browser and in Data-Forge Notebook.
    • To be able to define charts purely as data using a simple JSON format.
    • To be able to serialize a chart to send it over the wire or save it to disk.
    • To be able to separate chart configuration and chart data to make it easy to reuse the charts you create.

    Usage

    Some instructions for using plot. These instructions are for JavaScript, but this library also works in TypeScript.

    Import plot

    Browser

    npm install --save plot @plotex/render-dom
    
    const { plot } = require("plot");
    require("@plotex/render-dom");
    
    const data = [ /* your data */ ];
    const parentEl = /* parent DOM to contain the chart */ ;
    const chart = plot(data).renderDOM(parentEl);

    Node.js

    npm install --save plot @plotex/render-image
    
    const { plot } = require("plot");
    require("@plotex/render-image");
    
    const data = [ /* your data */ ];
    plot(data).renderImage("my-chart.png");

    Data-Forge Notebook

    plot is integrated into Data-Forge Notebook.

    You can plot an array of JavaScript data like this:

    const data = [ /* your data */ ];
    display.plot(data);

    See more Data-Forge Notebook examples in the exported example visualization notebook.

    Pass in configuration options

    const data = [ /* your data */ ];
    const chartConfig = { chartType: "bar" };
    const axisConfig = { x: "Date", y: "Close" };
    plot(data, chartConfig, axisConfig)
        .renderDOM(parentEl);

    Multiple types of data

    Plot an array of numbers

    plot([10, 15, 30])
        .renderDOM(parentEl);

    Plot an array of JavaScirpt object

    plot([ { A: 10, B: 52 }, { A: 15, B: 37 }, A: 30, B: 45 }])
        .renderDOM(parentEl);

    Plot by column

    plot({ A: [10, 15, 30], B: [52, 37, 45] })
        .renderDOM(parentEl);

    Resources

    Future

    There's more work to be done!

    Can you contribute, test or give feedback?

    Email the developer on ashley@codecapers.com.au.

    Support the developer

    Click here to support the developer.

    Install

    npm i plot

    DownloadsWeekly Downloads

    50

    Version

    1.0.21

    License

    MIT

    Unpacked Size

    83.4 kB

    Total Files

    28

    Last publish

    Collaborators

    • ashleydavis