{"id":14990229,"url":"https://github.com/apinet/lit-line","last_synced_at":"2025-04-12T02:06:01.109Z","repository":{"id":143886473,"uuid":"309348946","full_name":"apinet/lit-line","owner":"apinet","description":"lit-line is a minimal line chart web component for modern websites.","archived":false,"fork":false,"pushed_at":"2024-12-18T10:53:32.000Z","size":832,"stargazers_count":21,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T02:05:55.185Z","etag":null,"topics":["chart","charting-library","dataviz","lit","lit-html","svg","timeline","webcomponent"],"latest_commit_sha":null,"homepage":"https://apinet.github.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apinet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-02T11:25:30.000Z","updated_at":"2024-12-18T10:53:35.000Z","dependencies_parsed_at":"2023-11-09T13:03:16.846Z","dependency_job_id":"e93a894f-5466-4772-83d7-5fdec77d3846","html_url":"https://github.com/apinet/lit-line","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":"0.23529411764705888","last_synced_commit":"61974e2288be919899b24ca287eeecbb4d1aae4a"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apinet%2Flit-line","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apinet%2Flit-line/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apinet%2Flit-line/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apinet%2Flit-line/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apinet","download_url":"https://codeload.github.com/apinet/lit-line/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","charting-library","dataviz","lit","lit-html","svg","timeline","webcomponent"],"created_at":"2024-09-24T14:19:44.783Z","updated_at":"2025-04-12T02:06:01.069Z","avatar_url":"https://github.com/apinet.png","language":"TypeScript","readme":"## Overview\n\nlit-line is a minimal `line chart` web component for `modern website`.\n\nwhy?\n\n- `small`: less than 6kb (gzip)\n- `fast`: designed for rendering thousand of points with ease (thanks to the awesome lit-html)\n- `multi-lines support`: lines with the same unit are scaled together\n- `fully responsive`: high data density are merged for better readability\n- `interactive`: user can interact with lines (Desktop and mobile)\n- `agnostic`: can be used with your favorite plateform or library\n\n[try it!](https://apinet.github.io)\n\n![picture alt](https://apinet.github.io/screenshot_random.png \"LitLine Random screenshot\")\n\n## Installation\n\nYou can load our `lit-line` components via CDN:\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/lit-line@latest/cdn/lit-line.js\"\u003e\u003c/script\u003e\n```\n\nor by installing it locally using package manager such as NPM:\n\n```sh\nnpm i lit-line@latest\n```\n\nOnce installed, you only have to import the component and you are good to go.\n\n```js\nimport \"lit-line\";\n```\n\n:::tip[About version management]\nIt 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`.\n:::\n\n## quick start\n\n```javascript\n\u003clit-line id=\"chart\"\u003e\u003c/lit-line\u003e\n\n\u003cscript\u003e\n  const chart = document.getElementById('chart');\n\n  chart.data = [\n    {\n      color: '#112',\n      points: [\n        {time: 1982, value: 1112},\n        {time: 1983, value: 2705},\n        {time: 2014, value: 1303},\n        {time: 2016, value: 2605},\n      ]\n    }\n  ];\n\u003c/script\u003e\n```\n\n## quick start using lit-html (declarative)\n\n```javascript\nimport 'lit-line';\n\n\n\u003clit-line id=\"chart\" .data=${\n  [{\n    color: '#112',\n    points: [\n      {time: 1982, value: 1112},\n      {time: 1983, value: 2705},\n      {time: 2014, value: 1303},\n      {time: 2016, value: 2605},\n  ]}\u003e\u003c/lit-line\u003e\n```\n\n## Dataset format\n\nLit-Line `.data` property accepts `Serie` arrays such as:\n\n```ts\ninterface Serie {\n  color?: string; // the line color (default: #224)\n  unit?: string; // series with the same unit are scaled together\n  points: { time: number; value: number }[]; // a list of data points\n}\n```\n\n## Customization\n\nTo change the time selection appearance when the user interact with chart:\n\n```css\nlit-line {\n  --lit-line-selected-time--opacity: 0.4;\n  --lit-line-selected-time--color: red;\n  --lit-line-selected-time--width: 2;\n}\n```\n\n## Todo next\n\n- Add more test cases:\n  - testing browser resize\n  - testing user interactions\n  - ~~testing multi lines~~\n- Improve jsDoc\n- Enhance customization (need feedback here!)\n\n## License\n\nlit-line is available under the [MIT license](https://opensource.org/licenses/MIT).\n","funding_links":[],"categories":["Framework-Specific Libraries","JavaScript tools"],"sub_categories":["Lit-html","Charting libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapinet%2Flit-line","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapinet%2Flit-line","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapinet%2Flit-line/lists"}