https://github.com/apinet/lit-line
lit-line is a minimal line chart web component for modern websites.
https://github.com/apinet/lit-line
chart charting-library dataviz lit lit-html svg timeline webcomponent
Last synced: 6 months ago
JSON representation
lit-line is a minimal line chart web component for modern websites.
- Host: GitHub
- URL: https://github.com/apinet/lit-line
- Owner: apinet
- Created: 2020-11-02T11:25:30.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-18T10:53:32.000Z (10 months ago)
- Last Synced: 2025-04-12T02:05:55.185Z (6 months ago)
- Topics: chart, charting-library, dataviz, lit, lit-html, svg, timeline, webcomponent
- Language: TypeScript
- Homepage: https://apinet.github.io
- Size: 813 KB
- Stars: 21
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Overview
lit-line is a minimal `line chart` web component for `modern website`.
why?
- `small`: less than 6kb (gzip)
- `fast`: designed for rendering thousand of points with ease (thanks to the awesome lit-html)
- `multi-lines support`: lines with the same unit are scaled together
- `fully responsive`: high data density are merged for better readability
- `interactive`: user can interact with lines (Desktop and mobile)
- `agnostic`: can be used with your favorite plateform or library
[try it!](https://apinet.github.io)
## Installation
You can load our `lit-line` components via CDN:
```html
```
or by installing it locally using package manager such as NPM:
```sh
npm i lit-line@latest
```
Once installed, you only have to import the component and you are good to go.
```js
import "lit-line";
```
:::tip[About version management]
It is not recommended to use the `@latest` suffix, as a major release could break your application. Instead, use a fixed version such as `0.3.1`.
:::
## quick start
```javascript
const chart = document.getElementById('chart');
chart.data = [
{
color: '#112',
points: [
{time: 1982, value: 1112},
{time: 1983, value: 2705},
{time: 2014, value: 1303},
{time: 2016, value: 2605},
]
}
];
```
## quick start using lit-html (declarative)
```javascript
import 'lit-line';
```
## Dataset format
Lit-Line `.data` property accepts `Serie` arrays such as:
```ts
interface Serie {
color?: string; // the line color (default: #224)
unit?: string; // series with the same unit are scaled together
points: { time: number; value: number }[]; // a list of data points
}
```
## Customization
To change the time selection appearance when the user interact with chart:
```css
lit-line {
--lit-line-selected-time--opacity: 0.4;
--lit-line-selected-time--color: red;
--lit-line-selected-time--width: 2;
}
```
## Todo next
- Add more test cases:
- testing browser resize
- testing user interactions
- ~~testing multi lines~~
- Improve jsDoc
- Enhance customization (need feedback here!)
## License
lit-line is available under the [MIT license](https://opensource.org/licenses/MIT).