Bar and stacked bar charts

Bar charts represent categorical data as rectangular bars whose length is proportional to the value of a measure. Taucharts provides four bar variants: vertical (bar), horizontal (horizontal-bar), vertically stacked (stacked-bar), and horizontally stacked (horizontal-stacked-bar). The stacked variants use the color field to define the segments within each bar.

Variants

bar
horizontal-bar
stacked-bar
horizontal-stacked-bar

Vertical bars, one bar per category on the x-axis.

var chart = new Taucharts.Chart({
    type : 'bar',
    x    : 'team',
    y    : 'effort',
    color: 'priority',
    data : [
        { team: 'Alpha', effort: 40, priority: 'high' },
        { team: 'Alpha', effort: 25, priority: 'low'  },
        { team: 'Beta',  effort: 55, priority: 'high' },
        { team: 'Beta',  effort: 10, priority: 'low'  }
    ]
});

chart.renderTo('#chart');

Horizontal bars, one bar per category on the y-axis.

var chart = new Taucharts.Chart({
    type : 'horizontal-bar',
    x    : 'effort',
    y    : 'team',
    color: 'priority',
    data : [
        { team: 'alpha', effort: 8, priority: 'major' },
        { team: 'beta',  effort: 5, priority: 'minor' },
        { team: 'gamma', effort: 3, priority: 'major' }
    ]
});

chart.renderTo('#chart');

Vertical bars with segments stacked on top of each other. The color field determines the segment grouping.

var chart = new Taucharts.Chart({
    type : 'stacked-bar',
    x    : 'age',
    y    : ['count', 'sport'],
    color: 'country',
    data : [
        { country: 'Canada', sport: 'Biathlon',    medals: 20, age: 22 },
        { country: 'Canada', sport: 'Cross-Country', medals: 14, age: 24 },
        { country: 'Norway', sport: 'Biathlon',    medals: 30, age: 22 },
        { country: 'Norway', sport: 'Cross-Country', medals: 22, age: 24 }
    ]
});

chart.renderTo('#chart');

Horizontal bars with segments stacked side-by-side. Useful for part-to-whole comparisons with long category labels.

var chart = new Taucharts.Chart({
    type : 'horizontal-stacked-bar',
    y    : 'process',
    x    : 'count',
    color: 'stage',
    data : [
        { process: 'sales',   stage: 'visit',    count: 100 },
        { process: 'sales',   stage: 'purchase', count:  40 },
        { process: 'support', stage: 'open',     count:  80 },
        { process: 'support', stage: 'resolved', count:  65 }
    ]
});

chart.renderTo('#chart');

Configuration

type

string

required

One of "bar", "horizontal-bar", "stacked-bar", or "horizontal-stacked-bar".

string | string[]

required

The data field mapped to the horizontal axis. For stacked variants, accepts an array to create facets.

string | string[]

required

The data field mapped to the vertical axis. For stacked variants, accepts an array to create facets.

color

string

A data field used to color-encode bars or, for stacked variants, to define stack segments. Each unique value becomes a distinct color segment.

data

object[]

required

Array of plain objects. Each object represents one bar or one stack segment.

guide

object

Visual configuration for axes and padding.

plugins

object[]

Array of plugin instances. The legend plugin is commonly used with bar charts that encode color.

For stacked variants, the color field is required to define which segments belong together. Without it, all bars render as a single segment.

Getting Started

Chart Types

Configuration

Plugins

Advanced

Bar and stacked bar charts

Variants

Configuration

Build docs developers (and LLMs) love

Getting Started

Chart Types

Configuration

Plugins

Advanced

Documentation Index

​Variants

​Configuration

Build docs developers (and LLMs) love

Variants

Configuration