Bar Chart
Display data as vertical or horizontal bars with support for stacked and grouped layouts.
Loading chart...
Installation
bash
npx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
pnpm dlx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
yarn dlx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
bunx @galaxy-stack/nebula-cli@latest add bar-chart1
bash
# If you have installed galaxy-design globally
galaxy-design add bar-chart1
2
2
Dependencies
This component automatically installs the following dependencies:
- Vue:
vue-echarts@^7.0.3,echarts@^5.5.1 - React:
echarts-for-react@^3.0.2,echarts@^5.5.1 - Angular:
ngx-echarts@^18.0.0,echarts@^5.5.1 - React Native:
@wuba/react-native-echarts@^3.0.1,echarts@^5.5.1,@shopify/react-native-skia@^1.6.4 - Flutter:
fl_chart@^0.68.0
No manual installation needed!
Usage
Basic Bar Chart
Simple vertical bar chart with single dataset:
vue
<script setup lang="ts">
import { BarChart } from '@/components/ui/charts'
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [{
label: 'Revenue',
data: [120, 190, 300, 500, 420],
color: '#3b82f6'
}]
}
</script>
<template>
<BarChart :data="data" :height="300" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
tsx
import { BarChart } from "@/components/ui/charts"
const data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [{
label: 'Revenue',
data: [120, 190, 300, 500, 420],
color: '#3b82f6'
}]
}
export default function Example() {
return <BarChart data={data} height={300} />
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Horizontal Bar Chart
Display bars horizontally for better label readability:
vue
<template>
<BarChart
:data="data"
:height="300"
:horizontal="true"
/>
</template>1
2
3
4
5
6
7
2
3
4
5
6
7
tsx
<BarChart
data={data}
height={300}
horizontal
/>1
2
3
4
5
2
3
4
5
typescript
<ui-bar-chart
[data]="data"
[height]="300"
[horizontal]="true"
/>1
2
3
4
5
2
3
4
5
Grouped Bar Chart
Compare multiple datasets side by side:
vue
<script setup lang="ts">
import { BarChart } from '@/components/ui/charts'
const data = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: '2023',
data: [65, 59, 80, 81],
color: '#3b82f6',
},
{
label: '2024',
data: [75, 68, 90, 95],
color: '#10b981',
},
],
}
</script>
<template>
<BarChart :data="data" :height="400" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
tsx
import { BarChart } from "@/components/ui/charts"
const data = {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: '2023',
data: [65, 59, 80, 81],
color: '#3b82f6',
},
{
label: '2024',
data: [75, 68, 90, 95],
color: '#10b981',
},
],
}
export default function Example() {
return <BarChart data={data} height={400} />
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Stacked Bar Chart
Stack multiple datasets to show total composition:
vue
<script setup lang="ts">
import { BarChart } from '@/components/ui/charts'
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [
{
label: 'Direct',
data: [320, 332, 301, 334, 390],
color: '#3b82f6',
},
{
label: 'Email',
data: [220, 182, 191, 234, 290],
color: '#10b981',
},
{
label: 'Referral',
data: [150, 232, 201, 154, 190],
color: '#f59e0b',
},
],
}
</script>
<template>
<BarChart
:data="data"
:height="400"
:stacked="true"
/>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
tsx
import { BarChart } from "@/components/ui/charts"
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [
{
label: 'Direct',
data: [320, 332, 301, 334, 390],
color: '#3b82f6',
},
{
label: 'Email',
data: [220, 182, 191, 234, 290],
color: '#10b981',
},
{
label: 'Referral',
data: [150, 232, 201, 154, 190],
color: '#f59e0b',
},
],
}
export default function Example() {
return <BarChart data={data} height={400} stacked />
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
With Data Labels
Show values on top of bars:
vue
<template>
<BarChart
:data="data"
:height="300"
:show-data-labels="true"
/>
</template>1
2
3
4
5
6
7
2
3
4
5
6
7
tsx
<BarChart
data={data}
height={300}
showDataLabels
/>1
2
3
4
5
2
3
4
5
typescript
<ui-bar-chart
[data]="data"
[height]="300"
[showDataLabels]="true"
/>1
2
3
4
5
2
3
4
5
Dark Theme
Perfect for dark mode applications:
vue
<template>
<div class="dark">
<BarChart
:data="data"
:height="300"
theme="dark"
class="bg-gray-900 rounded-lg p-4"
/>
</div>
</template>1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
tsx
<div className="dark">
<BarChart
data={data}
height={300}
theme="dark"
className="bg-gray-900 rounded-lg p-4"
/>
</div>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Custom Bar Width and Gap
Control bar appearance:
vue
<template>
<BarChart
:data="data"
:height="300"
bar-width="30"
bar-gap="20%"
/>
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
tsx
<BarChart
data={data}
height={300}
barWidth={30}
barGap="20%"
/>1
2
3
4
5
6
2
3
4
5
6
With Gradient
Add gradient fill to bars:
vue
<template>
<BarChart
:data="data"
:height="300"
:gradient="true"
/>
</template>1
2
3
4
5
6
7
2
3
4
5
6
7
tsx
<BarChart
data={data}
height={300}
gradient
/>1
2
3
4
5
2
3
4
5
API Reference
Props
| Prop | Type | Default | Description | Framework Support |
|---|---|---|---|---|
data | ChartData | required | Chart data with labels and datasets | All |
height | number | 300 | Chart height in pixels | All |
width | number | string | '100%' | Chart width (number in pixels or string like "100%") | All |
theme | 'light' | 'dark' | 'light' | Color theme | All |
legend | boolean | true | Show/hide legend | All |
legendPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | Legend position | All |
grid | boolean | GridConfig | true | Show/hide or configure grid lines | All |
tooltip | boolean | TooltipConfig | true | Show/hide or configure tooltip | All |
animation | boolean | true | Enable/disable animations | All |
horizontal | boolean | false | Horizontal bar layout | All |
stacked | boolean | false | Stack multiple datasets | All |
showDataLabels | boolean | false | Show data labels on bars | All |
barWidth | string | number | undefined | Bar width (px or %) | All |
barGap | string | number | undefined | Gap between bars (px or %) | All |
gradient | boolean | false | Enable gradient fill | All |
zoom | boolean | false | Enable zoom controls (Web only) | Vue, React, Angular |
loading | boolean | false | Show loading state | All |
emptyText | string | 'No data available' | Empty state message | All |
className | string | undefined | Custom CSS class | Vue, React, Angular, RN |
options | object | {} | Advanced ECharts/fl_chart options | All |
ChartData Type
The data structure is consistent across all frameworks:
typescript
interface ChartData {
labels: string[]
datasets: ChartDataset[]
}
interface ChartDataset {
label: string
data: number[]
color?: string // Bar color
borderColor?: string // Border color (overrides color)
backgroundColor?: string // Background color
borderWidth?: number // Border thickness
}1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Color Schemes
Use built-in color schemes for consistent styling:
typescript
import { ChartColorSchemes } from '@/components/ui/charts'
const data = {
labels: ['A', 'B', 'C'],
datasets: [
{
label: 'Series 1',
data: [10, 20, 30],
color: ChartColorSchemes.default[0]
},
{
label: 'Series 2',
data: [15, 25, 35],
color: ChartColorSchemes.default[1]
}
]
}
// Available schemes:
// - ChartColorSchemes.default (vibrant, modern)
// - ChartColorSchemes.pastel (soft, muted)
// - ChartColorSchemes.vivid (bold, saturated)
// - ChartColorSchemes.monochrome (grayscale)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Advanced Examples
Horizontal Stacked Bar Chart
vue
<script setup lang="ts">
const data = {
labels: ['Product A', 'Product B', 'Product C', 'Product D'],
datasets: [
{
label: 'Online Sales',
data: [4200, 5300, 4100, 6200],
color: '#3b82f6',
},
{
label: 'In-store Sales',
data: [3800, 4200, 5500, 3900],
color: '#10b981',
},
],
}
</script>
<template>
<BarChart
:data="data"
:height="400"
:horizontal="true"
:stacked="true"
/>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
With Custom Grid Configuration
vue
<template>
<BarChart
:data="data"
:grid="{
show: true,
left: '15%',
right: '10%',
top: '20%',
bottom: '15%',
containLabel: true
}"
/>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Real-time Data Updates
vue
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { BarChart } from '@/components/ui/charts'
const data = ref({
labels: ['0s', '1s', '2s', '3s', '4s'],
datasets: [{
label: 'Requests/sec',
data: [0, 0, 0, 0, 0],
color: '#3b82f6'
}]
})
let interval: NodeJS.Timeout
onMounted(() => {
interval = setInterval(() => {
// Shift labels and data
data.value.labels.shift()
data.value.labels.push(`${data.value.labels.length}s`)
data.value.datasets[0].data.shift()
data.value.datasets[0].data.push(Math.floor(Math.random() * 100))
}, 1000)
})
onUnmounted(() => {
clearInterval(interval)
})
</script>
<template>
<BarChart :data="data" :height="300" :animation="false" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Performance Tips
- Disable animations for real-time data: Set
animation={false}for frequently updating charts - Use key prop in React: Add a unique key when data changes completely
- Memoize data: Use
useMemo(React) orcomputed(Vue) for expensive data transformations - Limit data points: Too many bars can impact performance (consider pagination)
- Lazy load: Import chart components dynamically for better initial load time
tsx
// React example
const BarChart = lazy(() => import('@/components/ui/charts/BarChart'))1
2
2
Accessibility
- Keyboard Navigation: Accessible via keyboard (zoom, tooltip interaction)
- Screen Reader: Chart data accessible via ARIA labels
- Focus Management: Proper focus handling for interactive elements
- WCAG Compliance: WCAG 2.1 Level AA compliant
- High Contrast: Works in high contrast mode
Browser/Platform Support
| Platform | Support | Notes |
|---|---|---|
| Chrome 90+ | ✅ Full | Recommended |
| Firefox 88+ | ✅ Full | |
| Safari 14+ | ✅ Full | |
| Edge 90+ | ✅ Full | |
| iOS 14+ | ✅ Full | Touch optimized |
| Android 10+ | ✅ Full | Touch optimized |
Troubleshooting
Chart not rendering
Make sure you've installed the dependencies:
bash
# Check if dependencies are installed
npm list echarts vue-echarts # Vue
npm list echarts echarts-for-react # React1
2
3
2
3
Bars overlapping
Adjust bar width and gap:
vue
<BarChart
:data="data"
bar-width="20"
bar-gap="10%"
/>1
2
3
4
5
2
3
4
5
Data not updating
Ensure data is reactive:
vue
// ✅ Correct - reactive
const data = ref({ ... })
// ❌ Wrong - not reactive
const data = { ... }1
2
3
4
5
2
3
4
5
Related Components
- Line Chart - Display trends over time
- Pie Chart - Show proportional data
- Area Chart - Coming soon
Resources
Author
Bùi Trọng Hiếu (kevinbui)
- GitHub: @buikevin
- Email: kevinbui210191@gmail.com
License
MIT © 2025 Bùi Trọng Hiếu (kevinbui)