<script lang="ts" setup>
const RevenueData = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
]
const RevenueCategories = computed(() => ({
desktop: {
name: 'Desktop',
color: '#22c55e',
},
}))
const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
const yFormatter = (tick: number) => tick.toString()
</script>
<template>
<BarChart
:data="RevenueData"
:height="300"
:categories="RevenueCategories"
:y-axis="['desktop']"
:x-num-ticks="6"
:radius="4"
:y-grid-line="true"
:x-formatter="xFormatter"
:y-formatter="yFormatter"
:legend-position="LegendPosition.Top"
:hide-legend="false"
/>
</template>
<script lang="ts" setup>
const RevenueData = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
]
const RevenueCategoriesMultple = {
desktop: { name: 'Desktop', color: '#3b82f6' },
mobile: { name: 'Mobile', color: '#22c55e' },
}
const yFormatter = (i: number): string => `${RevenueData[i]?.month}`
</script>
<template>
<BarChart
:data="RevenueData"
:stacked="true"
:height="300"
:categories="RevenueCategoriesMultple"
:y-axis="['desktop', 'mobile']"
:group-padding="0"
:bar-padding="0.2"
:x-num-ticks="6"
:radius="4"
:orientation="Orientation.Horizontal"
:x-formatter="yFormatter"
:y-formatter="(i: number): string => `${RevenueData[i]?.month}`"
:legend-position="LegendPosition.Top"
:hide-legend="false"
:x-grid-line="true"
/>
</template>
<script lang="ts" setup>
type RevenueDataItem = {
month: string
desktop: number
mobile: number
}
const RevenueData: RevenueDataItem[] = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
]
const RevenueCategoriesMultple = {
desktop: { name: 'Desktop', color: '#3b82f6' },
mobile: { name: 'Mobile', color: '#22c55e' },
}
const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
const yFormatter = (tick: number) => tick.toString()
</script>
<template>
<BarChart
:data="RevenueData"
:height="300"
:categories="RevenueCategoriesMultple"
:y-axis="['desktop', 'mobile']"
:group-padding="0"
:bar-padding="0.2"
:x-num-ticks="6"
:radius="4"
:x-formatter="xFormatter"
:y-formatter="yFormatter"
:legend-position="LegendPosition.Top"
:hide-legend="false"
:y-grid-line="true"
/>
</template>
<script lang="ts" setup>
type RevenueDataItem = {
month: string
desktop: number
mobile: number
}
const RevenueData: RevenueDataItem[] = [
{ month: 'January', desktop: 186, mobile: 80 },
{ month: 'February', desktop: 305, mobile: 200 },
{ month: 'March', desktop: 237, mobile: 120 },
{ month: 'April', desktop: 73, mobile: 190 },
{ month: 'May', desktop: 209, mobile: 130 },
{ month: 'June', desktop: 214, mobile: 140 },
]
const RevenueCategoriesMultple = {
desktop: { name: 'Desktop', color: '#3b82f6' },
mobile: { name: 'Mobile', color: '#22c55e' },
}
const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
const yFormatter = (tick: number, _i?: number, _ticks?: number[]) =>
tick.toString()
</script>
<template>
<BarChart
:data="RevenueData"
:stacked="true"
:height="300"
:categories="RevenueCategoriesMultple"
:y-axis="['desktop', 'mobile']"
:group-padding="0"
:bar-padding="0.2"
:x-num-ticks="6"
:radius="4"
:x-formatter="xFormatter"
:y-formatter="yFormatter"
:legend-position="LegendPosition.Top"
:hide-legend="false"
:y-grid-line="true"
/>
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
data | BarChartData[] | [] | Array of data points for the chart. |
categories | Record<string, BarCategory> | {} | Series configuration: name and color for each data key. |
height | number | 300 | Height of the chart in pixels. |
y-axis | string[] | [] | Array of keys to display on Y-axis. |
x-formatter | (tick: number, i?: number, ticks?: number[]) => string | - | Formats X-axis labels. |
y-formatter | (tick: number, i?: number, ticks?: number[]) => string | - | Formats Y-axis labels. |
x-label | string | - | Label for the X-axis. |
y-label | string | - | Label for the Y-axis. |
x-num-ticks | number | 5 | Number of ticks on X-axis. |
y-num-ticks | number | 5 | Number of ticks on Y-axis. |
radius | number | 0 | Border radius for bars. |
y-grid-line | boolean | false | Show horizontal grid lines. |
x-grid-line | boolean | false | Show vertical grid lines. |
legend-position | LegendPosition | 'none' | Position of the legend. |
hide-legend | boolean | true | Hide the chart legend. |
show-tooltip | boolean | true | Show tooltip on hover. |
tooltip-formatter | (data: BarChartData, key: string) => string | - | Custom formatter for tooltip content. |
bar-direction | `'vertical' | 'horizontal'` | 'vertical' |
grouped | boolean | false | Display grouped bars. |
stacked | boolean | false | Display stacked bars. |
The data should be an array of objects where each object represents a data point:
interface ChartData {
[key: string]: string | number
}
Categories define the visual appearance and metadata for each data series:
interface Category {
name: string
color: string
}
interface Categories {
[key: string]: Category
}