https://github.com/nextbitlabs/trend-line

Web-component implementation of a trendline.
https://github.com/nextbitlabs/trend-line

arrow chart trendline webcomponents

Last synced: 5 months ago
JSON representation

Web-component implementation of a trendline.

• Host: GitHub
• URL: https://github.com/nextbitlabs/trend-line
• Owner: nextbitlabs
• License: mit
• Created: 2021-07-19T09:56:22.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-07-30T14:51:21.000Z (almost 5 years ago)
• Last Synced: 2025-02-27T04:50:12.334Z (over 1 year ago)
• Topics: arrow, chart, trendline, webcomponents
• Language: JavaScript
• Homepage:
• Size: 1.41 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

          
# <trend-line>

![Latest Release](https://badgen.net/github/release/nextbitlabs/trend-line) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/trend-line)

Web component implementation of a trend-line.



## Usage

Import `trend-line` and set CSS custom properties:

```html

  

    import "https://cdn.skypack.dev/@nextbitlabs/trend-line";

  

  

    /*

      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 */

    }

  

```

Use the custom element:

```html

  

```

Set the data to plot:

```html

  const element = document.querySelector("trend-line");

  element.data = [[1, 3], [2, 5], [3, 2]];

```

Please have a look at the [demo](https://github.com/nextbitlabs/trend-line/blob/main/demo/index.html) in the repo, or the live [demo](https://pp41i.csb.app/).

## License

MIT