Column Chart

Column Chart displays categorical comparisons and analytical panels using vertical bars in a variety of chart layout types with RTL support.

Loading demo: column-chart-real-world

Installation

npx sdaia-ui@latest add column-chart

import { ColumnChart } from "@/components/ui/column-chart"

<ColumnChart type="insight" />

Column chart for visualising key data insights.

Loading demo: column-chart-insight

Column chart displaying score or performance values.

Loading demo: column-chart-score

Matrix-style column chart for comparing trends across multiple categories.

Loading demo: column-chart-trend-matrix

Grid layout of column charts for multi-dimensional data overview.

Loading demo: column-chart-insight-grid

Gauge-style column chart for showing progress toward a target.

Loading demo: column-chart-gauge

Props for the ColumnChart component.

Prop	Type	Default	Required
type	'Insight' \| 'Score' \| 'TrendMatrix' \| 'ValuePanel' \| 'InsightGrid' \| 'GaugeChart' \| 'PulseBox' \| 'MetricCell' \| 'DataCluster' \| 'ProgressMeter' \| 'Forecast' \| 'ScorePod' \| 'IndexTile'	'Insight'	optional
dir	'ltr' \| 'rtl'	-	optional
title	string	-	optional
note	string	-	optional
dateBadge	string	-	optional
label	string	-	optional
value	string	'422.61'	optional
badge	{ type?: 'increase' \| 'decrease'; value?: string }	-	optional
label2	string	-	optional
value2	string	'422.61'	optional
badge2	{ type?: 'increase' \| 'decrease'; value?: string }	-	optional
data	ColumnChartDataPoint[]	-	optional
data2	ColumnChartDataPoint[]	-	optional
maxValue	number	250	optional
xLabels	string[]	-	optional
yLabels	string[]	['250','200','150','100','50','0']	optional
tabs	ColumnChartTab[]	-	optional
defaultTab	string	-	optional
onTabChange	(value: string) => void	-	optional
legend	ColumnChartLegendItem[]	-	optional
metrics	ColumnChartMetric[]	-	optional
onActionClick	() => void	-	optional
actionLabel	string	-	optional