Skip to content

nextbitlabs/trend-line

Repository files navigation

<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