SDAIA Design System

Column Chart

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

Loading preview…

1'use client';

3import { ColumnChart } from 'sdaia-ui';

5const REVENUE_DATA = [

Installation

npx sdaia-ui@latest add column-chart

Usage

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

<ColumnChart type="insight" />

Examples

Insight

Column chart for visualising key data insights.

Loading preview…

1<ColumnChart

2 type="Insight"

3 title="Title"

4 dateBadge="26/02/26 - 01/03/26"

5 note="This is a note"

Score

Column chart displaying score or performance values.

Loading preview…

1<ColumnChart

2 type="Score"

3 title="Title"

4 metrics={[

5 { label: 'Metric Name', value: '422.61', badge: { type: 'increase', value: '12%' } },

Trend Matrix

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

Loading preview…

1<ColumnChart type="TrendMatrix" label="Indicator Name" value="422.61" />

Insight Grid

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

Loading preview…

1<ColumnChart

2 type="InsightGrid"

3 label="Indicator Name"

4 value="422.61"

5 label2="Indicator Name"

Gauge Chart

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

Loading preview…

API Reference

ColumnChartProps

Props for the ColumnChart component.

Prop	Type	Default	Required
type	'Insight' \| 'Score' \| 'TrendMatrix' \| 'ValuePanel' \| 'InsightGrid' \| 'GaugeCh...	'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

Prop

Type

Default

Required

type

'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