Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nextbitlabs/trend-line
Web-component implementation of a trendline.
https://github.com/nextbitlabs/trend-line
arrow chart trendline webcomponents
Last synced: 4 days 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 (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-30T14:51:21.000Z (about 3 years ago)
- Last Synced: 2024-09-25T16:03:14.589Z (8 days 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