Awesome

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!

Installation

You can load our lit-line components via CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/lit-line@latest/cdn/lit-line.js"></script>

or by installing it locally using package manager such as NPM:

npm i lit-line@latest

Once installed, you only have to import the component and you are good to go.

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

<lit-line id="chart"></lit-line>

<script>
  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},
      ]
    }
  ];
</script>

quick start using lit-html (declarative)

import 'lit-line';


<lit-line id="chart" .data=${
  [{
    color: '#112',
    points: [
      {time: 1982, value: 1112},
      {time: 1983, value: 2705},
      {time: 2014, value: 1303},
      {time: 2016, value: 2605},
  ]}></lit-line>

Dataset format

Lit-Line .data property accepts Serie arrays such as:

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:

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.