Parallel coordinates chart (ECharts)
<bc-chart-parallel data='{"dimensions":["Price","Rating","Sales"],"data":[[100,4.5,200],[200,3.8,150],[150,4.2,300]]}' />| Prop | Type | Default | Description |
|---|---|---|---|
| data | string (JSON) | '[]' | Chart data — {dimensions, data} |
| chart-title | string | '' | Chart title |
| colors | string (JSON) | '' | Color palette ["#4f46e5","#06b6d4"] |
| legend | boolean | true | Show legend |
| tooltip-enabled | boolean | true | Show tooltip |
| animate | boolean | true | Enable animation |
| height | string | '300px' | Chart height |
| width | string | '100%' | Chart width |
| loading | boolean | false | Show loading overlay |
| data-source | string | '' | Remote data URL |
| fetch-headers | string | '' | Custom fetch headers (JSON) |
| refresh-interval | number | 0 | Auto-refresh interval (ms) |
| theme | string | '' | ECharts theme ('dark' or custom JSON) |
| renderer | string | 'canvas' | Renderer ('canvas' or 'svg') |
| toolbox | boolean | false | Show toolbox (save, zoom, restore) |
| locale | string | '' | ECharts locale |
{
"dimensions": ["Price","Rating","Sales","Profit","Growth"],
"data": [
[100, 4.5, 200, 50, 10],
[200, 3.8, 150, 30, 5],
[150, 4.2, 300, 80, 15],
[180, 4.0, 250, 60, 12]
]
}Each row is one data line crossing all dimension axes.
| Event | Payload |
|---|---|
| lcChartClick | {name, value, dataIndex} |
| lcChartHover | {name, value, dataIndex} |
| lcChartReady | void |
| Method | Returns | Description |
|---|---|---|
| updateData(data) | Promise | Update chart data |
| setData(data) | Promise | Alias for updateData |
| refresh() | Promise | Re-fetch or re-render |
| resize() | Promise | Resize chart |
| exportImage(format?) | Promise | Export as image (png/jpeg/svg) |
| getChartInstance() | Promise | Get raw ECharts instance |
See theming, data-fetching.