Narcoleptic's Patch Mangler

    svg-line-chart

    0.4.0 • Public • Published

    svg-line-chart

    npm version Node.js CI

    logo

    Tired of 200kb charting browser libs? ...I feel ya. Come to the 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 on the x-axis.

    Screenshot

    Live demo at https://rugpullindex.com

    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,
        },
        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.

    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 or join our discord.

    You can also get paid for a PR. For more information read our handbook.

    Changelog

    The changelog is avaliable at CHANGELOG.md.

    License

    See License.

    References

    Install

    npm i svg-line-chart

    DownloadsWeekly Downloads

    19

    Version

    0.4.0

    License

    GPL-3.0-only

    Unpacked Size

    7.17 MB

    Total Files

    4974

    Last publish

    Collaborators

    • timdaub