REWidget widget-linechart
npm install @record-evolution/widget-linechartA Lit 3.x web component for rendering interactive line, bar, and scatter charts using ECharts. Part of the IronFlock widget ecosystem.
``bash`
npm i @record-evolution/widget-linechart
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
`
The bundler will automatically deduplicate echarts across multiple widgets.
For CDN usage without a bundler, configure an import map with all dependencies:
`html
type="module"
src="https://cdn.jsdelivr.net/npm/@record-evolution/widget-linechart@1.6.28/dist/widget-linechart.js"
>
`
Note: Version matching is critical - echarts 6.0.0 requires zrender 6.0.0 exactly.
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)
The widget accepts an inputData property with the following structure:
| Option | Type | Default | Description |
| -------------- | ------- | ------- | --------------------------------------------------------- |
| showLegend | boolean | true | Display the chart legend |showTitle
| | boolean | true | Display the chart title |showBox
| | boolean | false | Display a border frame around the chart area |timeseries
| | boolean | false | Enable time series x-axis (x-values should be timestamps) |columnLayout
| | boolean | false | Stack multiple charts vertically instead of horizontally |xAxisLabel
| | string | - | Label for the x-axis |showXAxis
| | boolean | true | Show/hide x-axis and labels |xAxisZoom
| | boolean | false | Enable zoom tool on x-axis |yAxisLabel
| | string | - | Label for the y-axis (positioned at top) |showYAxis
| | boolean | true | Show/hide y-axis and labels |yAxisScaling
| | boolean | false | Scale y-axis to data range (otherwise starts at 0) |
| Option | Type | Description |
| --------------------- | ---------------------------------- | ------------------------------------------------------------- |
| label | string | Series name shown in legend |type
| | "line" \| "bar" \| "scatter" | Chart type for this series |data
| | array | Array of { x, y, r?, pivot? } data points |backgroundColor
| | color | Fill color for area/bars |borderColor
| | color | Line/border color |styling.borderWidth
| | number | Line width (default: 2) |styling.borderDash
| | string | Line style: "solid", "dashed", "dotted" |styling.fill
| | boolean | Fill area under line |styling.pointStyle
| | string | Point shape: "circle", "rect", "triangle", "none" |advanced.chartName
| | string | Group series into named charts; use #split# for auto-naming |advanced.drawOrder
| | number | Z-index for layering series |
See src/default-data.json for a complete example.
- Chart types: line, bar, scatter (via dataseries[].type)axis.timeseries: true
- Time series: Set for date-based x-axisadvanced.chartName
- Multi-chart: Use to split series into separate chartsdata[].pivot
- Pivot/Split: auto-generates series per distinct valuetheme
- Adaptive animation: Animation duration automatically matches data update frequency
- Dynamic theming: Supports ECharts theme objects via the property
- Visibility controls: Toggle legend, title, axes, and box frame independently
- Y-axis label: Positioned at top of axis to avoid overlap with tick labels
- 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
`bash``
npm start
Runs a development server at http://localhost:8000/demo/