BarChart

The BarChart component visualizes data using rectangular bars. It supports multiple series with stacked, grouped, or 100% stacked layouts, and can be displayed vertically or horizontally.

Props

Data Props

data

Query | array

required

Query result or array of objects containing the data to visualize

string

required

Column name for the x-axis (categories)

string

required

Column name for the y-axis (values)

series

string

Column name to group data into multiple series

string

Column name for secondary y-axis values

Bar Style Props

type

string

default:"stacked"

Bar layout type: ‘stacked’ | ‘grouped’ | ‘stacked100’

fillColor

string

Fill color for bars (hex, rgb, or theme color name)

fillOpacity

number

Opacity of bar fill (0-1)

outlineColor

string

Color for bar outlines

outlineWidth

number

Width of bar outlines in pixels

Layout Props

swapXY

boolean

default:false

Swap axes to create horizontal bars

showAllXAxisLabels

boolean

Force showing all x-axis labels (may overlap)

Formatting Props

xFmt

string

Format string for x-axis values

yFmt

string

Format string for y-axis values

y2Fmt

string

Format string for secondary y-axis values

Chart Layout Props

title

string

Chart title displayed at the top

subtitle

string

Chart subtitle displayed below the title

legend

boolean

Whether to show the legend

chartAreaHeight

number

Height of the chart area in pixels

Axis Props

xAxisTitle

string | boolean

Title for x-axis. Use true to use column name

yAxisTitle

string | boolean

Title for y-axis. Use true to use column name

y2AxisTitle

string | boolean

Title for secondary y-axis

xGridlines

boolean

Show vertical gridlines

yGridlines

boolean

Show horizontal gridlines

y2Gridlines

boolean

Show gridlines for secondary y-axis

xAxisLabels

boolean

Show labels on x-axis

yAxisLabels

boolean

Show labels on y-axis

y2AxisLabels

boolean

Show labels on secondary y-axis

xBaseline

boolean

Show x-axis baseline

yBaseline

boolean

Show y-axis baseline

y2Baseline

boolean

Show secondary y-axis baseline

xTickMarks

boolean

Show tick marks on x-axis

yTickMarks

boolean

Show tick marks on y-axis

y2TickMarks

boolean

Show tick marks on secondary y-axis

Axis Scale Props

xType

string

Type of x-axis: ‘category’ | ‘time’ | ‘value’

yLog

boolean

Use logarithmic scale for y-axis

yLogBase

number

Base for logarithmic y-axis

yMin

number

Minimum value for y-axis

yMax

number

Maximum value for y-axis

yScale

boolean

Auto-scale y-axis to data range

y2Min

number

Minimum value for secondary y-axis

y2Max

number

Maximum value for secondary y-axis

y2Scale

boolean

Auto-scale secondary y-axis

Label Props

labels

boolean

Show data labels on bars

labelSize

number

Font size for labels

labelPosition

string

Position of labels: ‘inside’ | ‘outside’ | ‘top’

labelColor

string

Color for labels

labelFmt

string

Format string for labels

yLabelFmt

string

Format string for y-axis labels

y2LabelFmt

string

Format string for secondary y-axis labels

stackTotalLabel

boolean

Show total label on top of stacked bars

seriesLabels

boolean

Show labels for each series in stacked bars

showAllLabels

boolean

Show labels for all bars

Series Props

colorPalette

string | array

default:"default"

Color palette name or array of colors

seriesColors

object

Object mapping series names to colors

seriesOrder

array

Array specifying the order of series

y2SeriesType

string

Chart type for y2 series

seriesLabelFmt

string

Format string for series labels

Behavior Props

sort

boolean

Sort data by x-axis values

connectGroup

string

Connect charts for synchronized interactions

Advanced Props

echartsOptions

object

Custom ECharts configuration object

seriesOptions

object

Custom series configuration

printEchartsConfig

boolean

default:false

Print ECharts config to console

renderer

string

Renderer type: ‘canvas’ | ‘svg’

downloadableData

boolean

Enable data download

downloadableImage

boolean

Enable image download

emptySet

string

Empty data behavior: ‘pass’ | ‘warn’ | ‘error’

emptyMessage

string

Custom empty data message

yAxisColor

string

Color for y-axis

y2AxisColor

string

Color for secondary y-axis

leftPadding

number

Left padding for chart area

rightPadding

number

Right padding for chart area

xLabelWrap

boolean

Wrap x-axis labels

Examples

Basic Bar Chart

```sql sales_by_category
select category, sum(sales) as total_sales
from orders
group by category
order by total_sales desc

### Horizontal Bar Chart

```markdown
<BarChart 
  data={sales_by_category} 
  x="category" 
  y="total_sales" 
  swapXY="true"
  title="Sales by Category"
  yFmt="usd"
/>

Stacked Bar Chart

```sql sales_by_month_category
select 
  date_trunc('month', order_date) as month,
  category,
  sum(sales) as total_sales
from orders
group by 1, 2

### Grouped Bar Chart

```markdown
<BarChart 
  data={sales_by_month_category} 
  x="month" 
  y="total_sales" 
  series="category"
  type="grouped"
  title="Monthly Sales Comparison"
/>

100% Stacked Bar Chart

<BarChart 
  data={sales_by_month_category} 
  x="month" 
  y="total_sales" 
  series="category"
  type="stacked100"
  title="Sales Distribution"
  yFmt="pct"
/>

Custom Colors and Labels

<BarChart 
  data={sales_by_category} 
  x="category" 
  y="total_sales"
  fillColor="primary"
  labels="true"
  labelFmt="usd0"
  yFmt="usd"
  yGridlines="true"
/>

Chart Components

Data Display

Input Components

Layout Components

BarChart

BarChart

Props

Data Props

Bar Style Props

Layout Props

Formatting Props

Chart Layout Props

Axis Props

Axis Scale Props

Label Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Bar Chart

Stacked Bar Chart

100% Stacked Bar Chart

Custom Colors and Labels

Build docs developers (and LLMs) love

Chart Components

Data Display

Input Components

Layout Components

​BarChart

​Props

​Data Props

​Bar Style Props

​Layout Props

​Formatting Props

​Chart Layout Props

​Axis Props

​Axis Scale Props

​Label Props

​Series Props

​Behavior Props

​Advanced Props

​Examples

​Basic Bar Chart

​Stacked Bar Chart

​100% Stacked Bar Chart

​Custom Colors and Labels

Build docs developers (and LLMs) love

BarChart

Props

Data Props

Bar Style Props

Layout Props

Formatting Props

Chart Layout Props

Axis Props

Axis Scale Props

Label Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Bar Chart

Stacked Bar Chart

100% Stacked Bar Chart

Custom Colors and Labels