https://github.com/recordevolution/widget-linechart
Record Evolution Line Chart Widget
https://github.com/recordevolution/widget-linechart
Last synced: about 1 month ago
JSON representation
Record Evolution Line Chart Widget
- Host: GitHub
- URL: https://github.com/recordevolution/widget-linechart
- Owner: RecordEvolution
- License: mit
- Created: 2023-09-27T14:07:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-10T11:32:44.000Z (about 1 month ago)
- Last Synced: 2026-01-11T03:38:12.683Z (about 1 month ago)
- Language: TypeScript
- Size: 578 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
## Installation
```bash
npm i @record-evolution/widget-linechart
```
## Usage
### Bundled Application (Vite/Webpack)
When using a bundler, install the widget and its peer dependencies:
```bash
npm i @record-evolution/widget-linechart echarts@^6.0.0 tinycolor2@^1.6.0
```
Then import and use:
```html
import '@record-evolution/widget-linechart/widget-linechart.js'
```
The bundler will automatically deduplicate echarts across multiple widgets.
### CDN / Import Maps
For CDN usage without a bundler, configure an import map with all dependencies:
```html
// Polyfill for Node.js process.env required by echarts
window.process = { env: { NODE_ENV: 'production' } };
{
"imports": {
"echarts/core": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/core.js",
"echarts/charts": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/charts.js",
"echarts/components": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/components.js",
"echarts/renderers": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/renderers.js",
"echarts/features": "https://cdn.jsdelivr.net/npm/echarts@6.0.0/features.js",
"zrender/": "https://cdn.jsdelivr.net/npm/zrender@6.0.0/",
"tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/tslib.es6.mjs",
"tinycolor2": "https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/+esm"
}
}
```
**Note:** Version matching is critical - echarts 6.0.0 requires zrender 6.0.0 exactly.
## Dependencies
This widget has been optimized to externalize heavy dependencies:
- **echarts** (^6.0.0) - Chart rendering engine (~300KB)
- **tinycolor2** (^1.6.0) - Color manipulation utilities
Bundle size: ~36KB (down from 625KB with bundled echarts)
## Expected data format
Please take a look at the src/default-data.json to see what data is expected to make the widget show content.
## Features
- **Chart types:** line, bar, scatter (via `dataseries[].type`)
- **Time series:** Set `axis.timeseries: true` for date-based x-axis
- **Multi-chart:** Use `advanced.chartName` to split series into separate charts
- **Pivot/Split:** `data[].pivot` auto-generates series per distinct value
- **Adaptive animation:** Animation duration automatically matches data update frequency for smooth continuous transitions
- **Dynamic theming:** Supports ECharts theme objects
## Performance Optimizations
- Efficient data-only updates using `setOption()` merge mode
- Full rebuild only on configuration changes (detected via config fingerprinting)
- ResizeObserver-based chart resizing (no polling)
- Adaptive animation timing based on actual update intervals
## Tooling configs
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
## Local Demo with Vite
```bash
npm start
```
To run a local development server that serves the basic demo at http://localhost:8000/demo/