Developer guide · FastPlotJs 0.3.0

JavaScript line chart

Use a line chart to compare ordered values across a shared x axis. This example draws two named series on a browser Canvas, with a legend and visible axes.

Use this example Installation

Live example

Two series on one chart

The chart below uses the FastPlotJs browser demonstration module served with this site. The 0.3.0 package preserves the same public API.

Actual and TargetLoading chart…

Copy the code

Render it in your project

Install fastplotjs@0.3.0 with npm install fastplotjs in a browser project with a JavaScript bundler. Add this Canvas before the module runs:

<canvas id="chart" width="800" height="340"></canvas>

Import the public package root. The sample values and chart options match the live example.

import { createChart } from "fastplotjs";

const canvas = document.getElementById("chart");
const chart = createChart(canvas, {
  type: "line",
  engine: "ts",
  traces: [
    { name: "Actual", color: "#1768eb", data: [
      { x: 0, y: 10 }, { x: 1, y: 17 }, { x: 2, y: 14 }, { x: 3, y: 22 },
    ] },
    { name: "Target", color: "#00a7a1", data: [
      { x: 0, y: 12 }, { x: 1, y: 15 }, { x: 2, y: 18 }, { x: 3, y: 20 },
    ] },
  ],
  axes: { show: true },
  legend: true,
});

// Keep chart to call updateOptions(), resize(), or destroy() later.

How it works

Data and behavior

Each point has an x position and a y value. Separate traces carry the series names, colors, and data; legend: true identifies them. Use data instead of traces when you need one series.

The ts engine works without optional Rust or WebAssembly initialization. The chart needs a browser Canvas; for renderer-neutral Node scenes, see Node and export. Explore the line options reference and interaction options.

For values arranged in a two-dimensional grid, continue with the heatmap guide.