Skip to content
v0.3.3

Bar chart

Static/vector categorical comparisons in vertical, horizontal, grouped, or stacked layouts.

Purpose
Compare and rank named values across discrete categories, including grouped and stacked totals.
Use when
Use when bar length makes difference, order, or contribution easy to scan; choose horizontal bars for longer category labels.
Avoid when
Avoid when the key task is showing continuous change, dense distributions, or precise point-to-point relationships.
Equivalent data
Exact labels, category tables, and reference evidence accompany treatments that require precise reading without color alone.
Default Rendered example
Usage Example 
@bar.Bar(bar.Config{
  Label: "Monthly rainfall and evaporation",
  Title: "Bar Chart",
  Labels: []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"},
  Series: []bar.Series{
    {Name: "Rainfall", Values: rainfall},
    {Name: "Evaporation", Values: evaporation},
  },
  Legend: bar.LegendOptions{Placement: bar.LegendPlacementEnd, Overlay: true},
  Width: 600, Height: 400,
})

Thickness and group spacing

Compare automatic geometry, bars using 15% of each allotted slot, and grouped bars without an inter-series gap.

Thickness and group spacing Rendered example
Thickness and group spacing 
gap := 0.0
base := bar.Config{
  Label: "Bar geometry", Labels: months,
  Series: []bar.Series{{Name: "Rainfall", Values: rainfall}, {Name: "Evaporation", Values: evaporation}},
}
thin := base
thin.Geometry = bar.GeometryOptions{ThicknessRatio: 0.15}
noGap := base
noGap.Geometry = bar.GeometryOptions{GapRatio: &gap}

@bar.Bar(base)
@bar.Bar(thin)
@bar.Bar(noGap)

Rounded caps and value-label anchors

Rounded value-end caps work with exact labels at either the value end or category-axis start.

Rounded caps and value-label anchors Rendered example
Rounded caps and value-label anchors 
tightGap := 0.02
labels := bar.DataLabelOptions{Show: true, Format: bar.ValueFormatHumanized}
base := bar.Config{
  Label: "Rounded bars with exact value labels", Labels: months,
  Series: []bar.Series{{Name: "Rainfall", Values: rainfall, Labels: labels}, {Name: "Evaporation", Values: evaporation, Labels: labels}},
  Geometry: bar.GeometryOptions{GapRatio: &tightGap, RoundedCaps: true},
}
start := base
start.LabelPosition = bar.DataLabelPositionStart

@bar.Bar(base)
@bar.Bar(start)

Statistical reference annotations

Average lines and minimum/maximum points add context. Exact values and computed references remain adjacent without relying on color.

Statistical reference annotations Rendered example
Exact values and reference annotations
CategoryRainfallEvaporation
Jan23
Feb56
Mar79
Apr2326
May2629
Jun7771
Jul136176
Aug162182
Sep3349
Oct2019
Nov66
Dec32
SeriesAverageMaximumMinimum
Rainfall42162 at Aug2 at Jan
Evaporation48182 at Aug2 at Dec
Statistical reference annotations 
references := bar.References{
  Average: true, Minimum: true, Maximum: true,
  Format: bar.ValueFormatHumanized,
}

@bar.Bar(bar.Config{
  Label: "Monthly rainfall and evaporation reference annotations",
  Labels: []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"},
  Series: []bar.Series{
    {Name: "Rainfall", Values: rainfall, References: references},
    {Name: "Evaporation", Values: evaporation, References: references},
  },
  Width: 600, Height: 400,
})

Stacked totals

Stacked bars preserve component contributions while a maximum line and global maximum point identify the largest total.

Stacked totals Rendered example
Exact values and reference annotations
CategoryRainfallEvaporation
Jan23
Feb56
Mar79
Apr2326
May2629
Jun7771
Jul136176
Aug162182
Sep3349
Oct2019
Nov66
Dec32
Rainfall maximum line162 at Aug
Maximum stack total344 at Aug
Stacked totals 
@bar.Bar(bar.Config{
  Label: "Stacked monthly rainfall and evaporation", Labels: months, Stacked: true,
  Series: []bar.Series{
    {Name: "Rainfall", Values: rainfall, References: bar.References{MaximumLine: true, Format: bar.ValueFormatHumanized}},
    {Name: "Evaporation", Values: evaporation, References: bar.References{GlobalMaximum: true, PointPrefix: "Sum:", PointSize: 32, Format: bar.ValueFormatHumanized}},
  },
  Padding: bar.Padding{Top: 20, Right: 45, Bottom: 20, Left: 20},
})

Horizontal orientation

Use horizontal bars when category labels read more naturally beside values. Vertical remains the default.

Horizontal orientation Rendered example
Exact category values
Category20112012
UN1020
Brazil3040
Indonesia5060
USA7080
India90100
China110120
World130140
Horizontal orientation 
@bar.Bar(bar.Config{
  Label: "World population by reporting series",
  Title: "World Population",
  Orientation: bar.OrientationHorizontal,
  Labels: []string{"UN", "Brazil", "Indonesia", "USA", "India", "China", "World"},
  Series: []bar.Series{
    {Name: "2011", Values: []float64{10, 30, 50, 70, 90, 110, 130}},
    {Name: "2012", Values: []float64{20, 40, 60, 80, 100, 120, 140}},
  },
  Padding: bar.Padding{Top: 20, Right: 40, Bottom: 20, Left: 20},
  Width: 600, Height: 400,
})

Horizontal thickness and group spacing

The same automatic, thin, and no-gap geometry options apply after changing orientation.

Horizontal thickness and group spacing Rendered example
Exact category values
CategoryRainfallEvaporation
Jan22.6
Feb4.95.9
Mar79
Apr23.226.4
May25.628.7
Jun76.770.7
Exact category values
CategoryRainfallEvaporation
Jan22.6
Feb4.95.9
Mar79
Apr23.226.4
May25.628.7
Jun76.770.7
Exact category values
CategoryRainfallEvaporation
Jan22.6
Feb4.95.9
Mar79
Apr23.226.4
May25.628.7
Jun76.770.7
Horizontal thickness and group spacing 
gap := 0.0
base := bar.Config{
  Label: "Bar geometry", Orientation: bar.OrientationHorizontal,
  Labels: months,
  Series: []bar.Series{{Name: "Rainfall", Values: rainfall}, {Name: "Evaporation", Values: evaporation}},
}
thin := base
thin.Geometry = bar.GeometryOptions{ThicknessRatio: 0.15}
noGap := base
noGap.Geometry = bar.GeometryOptions{GapRatio: &gap}

@bar.Bar(base)
@bar.Bar(thin)
@bar.Bar(noGap)

Horizontal maximum references

Maximum reference lines remain aligned with the numeric axis after orientation changes.

Horizontal maximum references Rendered example
Exact category values
Category20112012
UN1020
Brazil3040
Indonesia5060
USA7080
India90100
China110120
World130140
Exact values and reference annotations
Category20112012
UN1020
Brazil3040
Indonesia5060
USA7080
India90100
China110120
World130140
2011 maximum line130 at World
2012 maximum line140 at World
Horizontal maximum references 
@bar.Bar(bar.Config{
  Label: "Horizontal world population with maximum reference lines",
  Orientation: bar.OrientationHorizontal,
  Labels: []string{"UN", "Brazil", "Indonesia", "USA", "India", "China", "World"},
  Series: []bar.Series{
    {Name: "2011", Values: values2011, References: bar.References{MaximumLine: true}},
    {Name: "2012", Values: values2012, References: bar.References{MaximumLine: true}},
  },
})

Stacked horizontal values

Stacked horizontal bars can show exact segment labels and hide the redundant numeric axis.

Stacked horizontal values Rendered example
Exact category values
Category20112012
UN1020
Brazil3040
Indonesia5060
USA7080
India90100
China110120
World130140
Stacked horizontal values 
labels := bar.DataLabelOptions{Show: true}
@bar.Bar(bar.Config{
  Label: "Stacked horizontal values", Orientation: bar.OrientationHorizontal, Stacked: true,
  Labels: []string{"UN", "Brazil", "Indonesia", "USA", "India", "China", "World"},
  Series: []bar.Series{
    {Name: "2011", Values: values2011, Labels: labels},
    {Name: "2012", Values: values2012, Labels: labels},
  },
  ValueAxis: bar.ValueAxisOptions{Hidden: true},
})

Static/vector behavior

Bar renders inline SVG on the server, supports SVG and PNG download through the shared wrapper, and remains useful in print or no-JavaScript output. Review the shared chart-mode and control guides for delivery and wrapper choices.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/bar

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API