Bar chart
Vertical bars for one or two series, themed from the running brand color.
<script setup lang="ts">
import BarChart from '@shared/components/common/charts/BarChart.vue'
const categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const series = [{ name: 'Orders', data: [182, 231, 196, 274, 312, 268, 154] }]
</script>
<template>
<BarChart :categories="categories" :series="series" />
</template>Usage
Pass categories for the x axis and one entry in series per set of bars. Colors, axis lines, labels and the tooltip surface are read from the theme, so the chart follows the brand color and dark mode without being told.
ECharts is heavy, so the template's dashboards import their charts with defineAsyncComponent. Do the same on a page where the chart is below the fold, and ECharts stays out of that page's first chunk.
Examples
Two series
A second series renders grouped, not stacked, so the pair stays comparable. The legend appears on its own once there is more than one series.
<script setup lang="ts">
import BarChart from '@shared/components/common/charts/BarChart.vue'
const categories = ['Q1', 'Q2', 'Q3', 'Q4']
const series = [
{ name: 'Revenue', data: [142300, 168400, 151900, 187600] },
{ name: 'Target', data: [150000, 160000, 170000, 180000] },
]
</script>
<template>
<BarChart :categories="categories" :series="series" :height="260" />
</template>Loading
loading swaps the chart for a skeleton of the same height, so the card does not change size when the data arrives.
<script setup lang="ts">
import BarChart from '@shared/components/common/charts/BarChart.vue'
</script>
<template>
<BarChart :categories="[]" :series="[]" loading :height="200" />
</template>API
Source: src/shared/components/common/charts/BarChart.vue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
categories | string[] | required | Labels along the x axis. |
series | BarSeries[] | required | One entry per set of bars. |
loading | boolean | false | Renders a skeleton of height instead of the chart. |
height | number | 300 | Chart height in pixels. |
BarSeries is { name: string, data: number[], color?: string }. Without color, a series takes its color from the theme palette, brand color first.
Emits
None.
Slots
None.
Accessibility
- The chart renders to a canvas, which a screen reader cannot read. Put the same numbers in text or a table next to it when they matter.
- Tooltips appear on hover and on touch, not on keyboard focus.
- Values in the tooltip are formatted with the app's locale.