DataChartUI
components/data/ChartUI.vue
Full Chart.js wrapper supporting line and bar charts with auto-formatted axes.
Scenarios
Empty
Single point
Overflow (1000 points)
components/data/ChartUI.vue
Usage
<DataChartUI
:data = "[]"
type = "line"
:compact = "false"
unit = "—"
:showYAxis = "true"
:showXAxis = "true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | Array | [] | Array of timestamped data points |
| type | String | 'line' | 'line' or 'bar' |
| compact | Boolean | false | Reduce axis label size |
| unit | String | '' | Y-axis unit ('bytes', 'duration', or custom) |
| showYAxis | Boolean | true | Display Y-axis |
| showXAxis | Boolean | true | Display X-axis |