Plotive

A JavaScript library for creating charts and data visualizations. Plotive is a set of JavaScript bindings for the plotive project written in Rust.

Checkout the showroom !

You may also be interested in the Python bindings.

Features

• 📊 Create charts and data visualizations
• 🚀 Works in both browser and Node.js environments
• 🎨 Full customization of styles and themes
• 📐 Support for multiple axes and subplots
• 🏷️ Flexible legends and annotations

Installation

npm install plotive

or with pnpm:

pnpm add plotive

Example

Usage

In the Browser

import { renderAsSvg } from "plotive";

const x = Array.from({ length: 100 }, (_, i) => (i / 99) * 2 * Math.PI);
const y = x.map((x) => Math.sin(x));

const fig = {
    plot: {
        series: [
            {
                type: "line",
                x: x,
                y: y,
            },
        ],
    },
};

const container = document.getElementById("chart-container");
await renderAsSvg(fig, container);

In Node.js

import { renderToSvgString } from "plotive";

const x = Array.from({ length: 100 }, (_, i) => (i / 99) * 2 * Math.PI);
const y = x.map((x) => Math.sin(x));

const fig = {
    plot: {
        series: [
            {
                type: "line",
                x: x,
                y: y,
            },
        ],
    },
};

const svgString = await renderToSvgString(fig);
console.log(svgString);

API

renderAsSvg(figure, element)

Renders a figure as SVG and inserts it into a DOM element.

await renderAsSvg(fig, document.getElementById("chart"));

renderToSvgString(figure)

Renders a figure as SVG and returns it as a string.

const svg = await renderToSvgString(fig);

renderToImg(figure, element)

Renders a figure as PNG and assigns it to an image element.

await renderToImg(fig, document.querySelector("img"));

renderToPngDataUrl(figure)

Renders a figure as PNG and returns a Data URL.

const dataUrl = await renderToPngDataUrl(fig);
img.src = dataUrl;

Examples

Basic Example: Sine Wave

import { renderAsSvg } from "plotive";

const x = Array.from({ length: 500 }, (_, i) => (i / 499) * 2 * Math.PI);
const y = x.map((x) => Math.sin(x));

const fig = {
    title: "Sine Wave",
    plot: {
        series: [
            {
                type: "line",
                x: x,
                y: y,
            },
        ],
    },
};

await renderAsSvg(fig, document.getElementById("chart"));

Advanced Example: Multiple Y-Axes

import { renderAsSvg } from "plotive";

const x = Array.from({ length: 500 }, (_, i) => (i / 499) * Math.PI);
const y1 = x.map((x) => 1000 * Math.sin(x));
const y2 = x.map((x) => Math.sin(x) - 0.8 * Math.sin(x) ** 2);

const fig = {
    title: "Example with Multiple Y-Axes",
    legend: { pos: "top" },
    plot: {
        series: [
            {
                type: "line",
                name: "1000 * sin(x)",
                x: x,
                y: y1,
                yAxis: 0,
            },
            {
                type: "line",
                name: "sin(x) - 0.8*sin(x)²",
                x: x,
                y: y2,
                yAxis: 1,
            },
        ],
        xAxis: {
            title: "X",
            ticks: "pimultiple",
        },
        yAxes: [
            {
                title: "Y1",
                ticks: "auto",
            },
            {
                title: "Y2",
                side: "right",
                ticks: "percent",
            },
        ],
    },
};

await renderAsSvg(fig, document.getElementById("chart"));

Figure Structure

interface Figure {
    // Chart configuration
    size?: [number, number]; // Dimensions [width, height]
    title?: string; // Figure title
    padding?: number | [number, number] | [number, number, number, number];
    fill?: ThemeFill; // Background color
    legend?: FigLegend; // Legend configuration

    // Content
    plot?: Plot; // Single plot
    plots?: Plot[]; // Multiple plots
}

interface Plot {
    series: Series[]; // Data series
    title?: string; // Plot title
    xAxis?: Axis; // X axis
    xAxes?: Axis[]; // Multiple X axes
    yAxis?: Axis; // Y axis
    yAxes?: Axis[]; // Multiple Y axes
    legend?: PlotLegend; // Plot legend
    annotations?: Annotation[]; // Annotations
    subplot?: [number, number]; // Subplot position
}

interface Series {
    type: "line" | "scatter"; // Series type
    x: number[]; // X data
    y: number[]; // Y data
    name?: string; // Series name
    yAxis?: number; // Y axis index
    // ... other style options
}

About

Plotive is a set of JavaScript bindings for the plotive project written in Rust. It brings the power of Rust for chart generation while providing the flexibility of JavaScript.

License

See the LICENSE file for details.

Author

Rémi Thebault