Interactive bar

Categorical comparisons with grouped, stacked, horizontal, labeled, referenced, and zoomable treatments.

Purpose: Compare magnitudes across a small ordered or unordered category set.
Use when: People need direct category comparisons, optional grouping or stacking, and hover exploration.
Avoid when: Too many categories, too many stacks, or precise lookup dominates; use a table or another summary.
Equivalent data: Every example includes a keyboard-readable exact-value table; labels and references never rely on color alone.

Two deterministic seven-day series preserve the upstream categorical shape.

Exact category values

Category	Series	Value
Mon	Category A	60
Mon	Category B	9
Tue	Category A	251
Tue	Category B	43
Wed	Category A	113
Wed	Category B	58
Thu	Category A	136
Thu	Category B	150
Fri	Category A	134
Fri	Category B	74
Sat	Category A	205
Sat	Category B	126
Sun	Category A	229
Sun	Category B	183

7 categories across 2 series.

Usage Example

import (
  "github.com/araihu/goshtoso-charts/components/chart"
  interactivebar "github.com/araihu/goshtoso-charts/components/interactive/bar"
)

@interactivebar.Bar(interactivebar.Config{
  Label: "Basic bar example",
  XAxis: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
  Series: []interactivebar.Series{
    {Name: "Category A", Data: categoryA},
    {Name: "Category B", Data: categoryB},
  },
  Options: chart.ChartOptions{
    Title: &chart.TitleOptions{Text: "basic bar example", Subtitle: "This is the subtitle."},
    Tooltip: &chart.TooltipOptions{Show: chart.Bool(true), Trigger: "axis"},
  },
})

Labels

Visible labels repeat exact values directly on the marks while the disclosure table remains the complete reading path.

Every bar exposes its exact value above the mark and in the adjacent table.

Exact category values

Category	Series	Value
Mon	Category A	200
Mon	Category B	69
Tue	Category A	247
Tue	Category B	159
Wed	Category A	255
Wed	Category B	88
Thu	Category A	125
Thu	Category B	95
Fri	Category A	166
Fri	Category B	100
Sat	Category A	40
Sat	Category B	250
Sun	Category A	70
Sun	Category B	43

7 categories across 2 series.

Labels

SeriesOptions: chart.SeriesOptions{Label: &chart.LabelOptions{Show: chart.Bool(true), Position: "top"}}

Axes and units

Named axes, literal unit suffixes, and split lines add reading context without accepting executable formatter code.

Axis names, unit suffixes, and split lines clarify how categories and values are read.

Exact category values

Category	Series	Value
Mon	Category A	236
Mon	Category B	74
Tue	Category A	159
Tue	Category B	115
Wed	Category A	52
Wed	Category B	205
Thu	Category A	40
Thu	Category B	253
Fri	Category A	29
Fri	Category B	45
Sat	Category A	172
Sat	Category B	181
Sun	Category A	82
Sun	Category B	76

7 categories across 2 series.

Axes and units

Options: chart.ChartOptions{
  XAxis: &chart.AxisOptions{Name: "XAxisName", LabelSuffix: " x-unit", ShowSplitLine: chart.Bool(true)},
  YAxis: &chart.AxisOptions{Name: "YAxisName", LabelSuffix: " y-unit", ShowSplitLine: chart.Bool(true)},
}

Explicit colors

Caller-selected colors override theme series tokens when a fixed visual identity is required.

Caller-selected colors override the theme palette for both series.

Exact category values

Category	Series	Value
Mon	Category A	12
Mon	Category B	5
Tue	Category A	7
Tue	Category B	287
Wed	Category A	125
Wed	Category B	68
Thu	Category A	88
Thu	Category B	150
Fri	Category A	145
Fri	Category B	223
Sat	Category A	80
Sat	Category B	145
Sun	Category A	215
Sun	Category B	57

7 categories across 2 series.

Explicit colors

Style: charttheme.Style{Colors: []string{"#2563eb", "#db2777"}}

Series arrangement

Widths, gaps, horizontal orientation, and stacking are typed treatments on the same Bar component.

One absolute width, one percentage width, and a 150% inter-series gap preserve the upstream size treatments.

Exact category values

Category	Series	Value
Mon	Category A	246
Mon	Category B	264
Tue	Category A	47
Tue	Category B	215
Wed	Category A	112
Wed	Category B	180
Thu	Category A	66
Thu	Category B	276
Fri	Category A	64
Fri	Category B	115
Sat	Category A	40
Sat	Category B	61
Sun	Category A	99
Sun	Category B	78

7 categories across 2 series.

Categories move to the vertical axis for easier comparison of long labels.

Exact category values

Category	Series	Value
Mon	Category A	30
Mon	Category B	291
Tue	Category A	196
Tue	Category B	103
Wed	Category A	81
Wed	Category B	6
Thu	Category A	215
Thu	Category B	21
Fri	Category A	228
Fri	Category B	205
Sat	Category A	75
Sat	Category B	136
Sun	Category A	128
Sun	Category B	234

7 categories across 2 series.

Both series share one stack so each category shows a combined total.

Exact category values

Category	Series	Value
Mon	Category A	23
Mon	Category B	20
Tue	Category A	212
Tue	Category B	186
Wed	Category A	227
Wed	Category B	180
Thu	Category A	92
Thu	Category B	150
Fri	Category A	279
Fri	Category B	254
Sat	Category A	82
Sat	Category B	140
Sun	Category A	212
Sun	Category B	27

7 categories across 2 series.

Series arrangement

Orientation: interactivebar.OrientationHorizontal,
SeriesOptions: chart.SeriesOptions{Stack: "stackA", BarGap: "150%"},
Series: []interactivebar.Series{
  {Name: "Category A", Data: categoryA, Options: chart.SeriesOptions{BarWidth: "35"}},
  {Name: "Category B", Data: categoryB, Options: chart.SeriesOptions{BarWidth: "15%"}},
}

Category zoom

Inside gestures and a visible slider expose the same bounded category window; exact values remain available outside the canvas.

The initial window shows 10% through 50% of the seven ordered categories.

Exact category values

Category	Series	Value
Mon	Category A	230
Mon	Category B	248
Tue	Category A	19
Tue	Category B	225
Wed	Category A	13
Wed	Category B	166
Thu	Category A	54
Thu	Category B	284
Fri	Category A	130
Fri	Category B	29
Sat	Category A	18
Sat	Category B	235
Sun	Category A	289
Sun	Category B	207

7 categories across 2 series.

The initial window shows 10% through 50% of the seven ordered categories.

Exact category values

Category	Series	Value
Mon	Category A	230
Mon	Category B	248
Tue	Category A	19
Tue	Category B	225
Wed	Category A	13
Wed	Category B	166
Thu	Category A	54
Thu	Category B	284
Fri	Category A	130
Fri	Category B	29
Sat	Category A	18
Sat	Category B	235
Sun	Category A	289
Sun	Category B	207

7 categories across 2 series.

Category zoom

Zoom: &interactivebar.Zoom{
  Mode: interactivebar.ZoomSlider,
  StartPercent: 10,
  EndPercent: 50,
}

Calculated and explicit references

Named points and guide lines add context while the adjacent table preserves every source value.

A named Monday point sits beside calculated minimum and maximum markers.

Exact category values

Category	Series	Value
Mon	Category A	100
Mon	Category B	190
Tue	Category A	159
Tue	Category B	193
Wed	Category A	28
Wed	Category B	236
Thu	Category A	72
Thu	Category B	213
Fri	Category A	1
Fri	Category B	253
Sat	Category A	242
Sat	Category B	114
Sun	Category A	22
Sun	Category B	48

7 categories across 2 series.

Maximum and average guides summarize both seven-value series.

Exact category values

Category	Series	Value
Mon	Category A	225
Mon	Category B	94
Tue	Category A	272
Tue	Category B	161
Wed	Category A	85
Wed	Category B	46
Thu	Category A	290
Thu	Category B	223
Fri	Category A	123
Fri	Category B	79
Sat	Category A	237
Sat	Category B	238
Sun	Category A	279
Sun	Category B	276

7 categories across 2 series.

Calculated and explicit references

References: interactivebar.References{
  Points: []interactivebar.PointReference{
    {Name: "Maximum", Statistic: interactivebar.StatisticMaximum},
    {Name: "special mark", Coordinate: &interactivebar.Coordinate{Category: "Mon", Value: 100}},
  },
  Lines: []interactivebar.GuideReference{{Name: "Average", Statistic: interactivebar.StatisticAverage}},
  ShowLabels: chart.Bool(true),
}

Large canvas

A taller chart preserves the upstream large-canvas intent while responsive width keeps page layout consumer-owned.

The upstream 1200 by 600 canvas becomes container-wide while preserving the 600-pixel height.

Exact category values

Category	Series	Value
Mon	Category A	60
Mon	Category B	90
Tue	Category A	260
Tue	Category B	94
Wed	Category A	20
Wed	Category B	49
Thu	Category A	106
Thu	Category B	96
Fri	Category A	268
Fri	Category B	169
Sat	Category A	105
Sat	Category B	166
Sun	Category A	43
Sun	Category B	285

7 categories across 2 series.

Large canvas

Width: "100%", Height: "600px"

Shared chart behavior

Use the chart controls guide covering expand, fullscreen, and PNG export behavior. The chart modes guide explains interactive canvas, runtime, and print tradeoffs.

Mixed-series composition

The upstream Bar, Line, and Scatter overlay needs a separate renderer-neutral composite chart API. Bar does not accept backing-renderer series or raw option escape hatches.

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/interactive/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