Echarts svg worker chart

Skill kjuhwa/skills-hub/skills/design/echarts-svg-worker-chart

High-performance chart component using ECharts with custom SVG overlays (markLine/markArea/markPoint), worker thread data processing, and brush selection interactionFrom its SKILL.md

Install

npx -y skills add kjuhwa/skills-hub --skill echarts-svg-worker-chart

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.3 KB, 462 tokens by cl100k_base, as published. Nobody here has run it

ECharts SVG Worker Chart

Architecture

ChartSvg (forwardRef + useImperativeHandle)
  ├── ECharts instance (canvas/svg renderer)
  ├── Custom SVG overlays (markLine, markArea, markPoint)
  ├── Worker thread (data transformation, aggregation)
  └── Event system (hover, drag, brush selection)

Steps

Create chart component with forwardRef + useImperativeHandle:
- Expose external API: setOption(), resize(), getDataIndex(), dispatchAction()
- Internal state: ECharts instance ref, overlay positions, selected indices
Offload data processing to Web Worker:
- Heavy operations (aggregation, downsampling, unit conversion) run in worker
- Worker posts processed data back; component calls setOption() on ECharts instance
- Prevents UI thread blocking for large datasets
Add custom SVG overlays:
- markLine: threshold lines, baselines (rendered as ECharts markLine series)
- markArea: highlighted ranges (time windows, anomaly zones)
- markPoint: annotations at specific data points
- Configure via CustomChartOptions prop: { markLine, markArea, smooth, isStacked, lineStyle }
Implement brush selection:
- Enable ECharts brush toolbox action
- chartEventNew.ts handles brush start/end events
- Track selected data indices for drill-down or time range sync
- Drag interaction: mouse events for custom drag behavior (pan, zoom region)
Chart variants (compose from base):
- ChartNew: standard line/bar/area with Sirius styling
- ScatterChart: scatter plot with custom point renderers
- HexagonChart: hexbin layout via hexagonUtil.ts
- SankeyChart / TreemapChart: flow/hierarchy visualizations

Key details

useParentSize hook for responsive dimension tracking
Color scheme injection from design tokens
Legend can be separate grid component or inline within chart

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.