Neoclassical Programming Multitude

    @nextbitlabs/trend-line

    1.2.1 • Public • Published

    <trend-line>

    Latest Release Published on webcomponents.org

    Web component implementation of a trend-line.

    Usage

    Import trend-line and set CSS custom properties:

    <head>
      <script type="module">
        import "https://cdn.skypack.dev/@nextbitlabs/trend-line";
      </script>
      <style>
        /*
          CSS custom properties penetrate the Shadow DOM.
          They are useful to provide custom styling.
        */
        trend-line {
          --color: #333; /* default black */
          --stroke-width: 2px; /* default 2px */
          --background: #eee; /* default transparent */
        }
      </style>
    </head>

    Use the custom element:

    <body>
      <trend-line
        x-interval="[0, 10]"
        y-interval="[0, 1]"
        width="100"
        height="100"
        margin="20"
      ></trend-line>
    </body>

    Set the data to plot:

    <script>
      const element = document.querySelector("trend-line");
      element.data = [[1, 3], [2, 5], [3, 2]];
    </script>

    Please have a look at the demo in the repo, or the live demo.

    License

    MIT

    Install

    npm i @nextbitlabs/trend-line

    DownloadsWeekly Downloads

    83

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    6.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • nextbit
    • riccardoscalco
    • nkint