Plotive

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

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

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