arty-name/svg-line-chart

SVG chart generator library (works fully server-side)

svg-line-chart

SVG chart generator library (works fully server-side)

API Documentation | Changelog

---

Why another library for charts?

• Runs on the server - unlike all 99% available libraries
• Minimum size - browser-svg-line-chart.js is 34KB (d3.min.js is 264KB!); anyway size doesn't matter here as it runs on your server!
• Just generates a <svg> line chart. NO EXTRA JS OR CSS.
• Responsiveness through <svg> tag
• Unit tests & Small code base
• CJS and ESM bundles

About

svg-line-chart is a server side charting library. Create a simple line chart with numbers on the y-axis and Date or Integers on the x-axis.

Screenshot

We use this in production at https://news.kiwistand.com/stats

Installation

$ npm i svg-line-chart vhtml htm

Usage

A working example can be found in ./scripts/serve.mjs.

import htm from "htm";
import vhtml from "vhtml";

const html = htm.bind(vhtml);

import { plot } from 'svg-line-chart'

const x = [
  "2021-01-01",
  "2021-02-01",
  "2021-03-01",
  "2021-04-01",
  "2021-05-01",
].map((d) => new Date(d));

const y = [1, 2, 3, 4, 5];

// chart is a html string that can be rendered by the browser
const chart = plot(html)(
  { x, y },
  {
    props: {
      style: "display:block;margin:0 auto;",
    },
    margin: 25,
    width: 70,
    height: 20,
    title: "A line chart",
    polygon: {
      fill: 'none',
      style: 'fill:url(#polygrad);',
      strokeWidth: 0.01,
      stroke: "white",
    },
    line: {
      fill: "none",
      strokeWidth: 0.1,
      stroke: "black",
    },
    polygonGradient: {
      offSet1: "0%",
      stopColor1: "#ffffff00",
      offSet2: "100%",
      stopColor2: "#ffffff00",
    },
    xAxis: {
      strokeWidth: 0.1,
      stroke: "black",
    },
    yAxis: {
      strokeWidth: 0.1,
      stroke: "black",
    },
    xLabel: {
      fontSize: 1.5,
      name: "Date"
    },
    yLabel: {
      fontSize: 1.5,
      name: "PRICE (EUR)",
      locale: "en-US",
    },
    xGrid: {
      strokeWidth: 0.05,
      stroke: "lightgrey",
    },
    yGrid: {
      strokeWidth: 0.05,
      stroke: "lightgrey",
    },
    yNumLabels: 10,
  }
)

Notes

• plot will try to automatically scale the y labels based on how many labels you prefer using yNumLabels. Please note that the algorithm behind yNumLabels is based on a best-effort strategy. There won't be a guarantee that it'll return the number specified.
• You will probably need more than 31 days on the x axis for the date scaling to work.

API

The API documentation is available at API.md.

Contributing

We love contributions from the community. Find a good first issue.

Want to suggest a feature or even better raise a PR for it? Head over to the issues section.

Changelog

The changelog is avaliable at CHANGELOG.md.

License

See License.

References

• https://css-tricks.com/how-to-make-charts-with-svg/