BAR CHART STYLES

<BarChart>bar-chart.tsx
G2G

BAR HOVER — CANONICAL DEFAULT

Canonical hover treatment: hovering a bar dims all other bars and surfaces the tooltip. The grey-rect cursor backdrop is suppressed via the wrapper class. V1/V2 are single-series; V3/V4 are stacked.

V1 · BRAND · ROUNDED · NO AXES
V2 · BRAND · ROUNDED · NO AXES
V3 · BRAND + POS · STACKED · ROUNDED
V4 · BRAND + POS · STACKED · ROUNDED

DEFAULT BAR CHART

CLEAN, NO AXES
ROUNDED BARS
END BORDER STYLE
BORDERED STYLE WITH EDGE FADE
ROUNDED CORNERS (MULTI)

  1. Revenue

  2. Profit

BORDERED STYLE (MULTI)

  1. Revenue

  2. Profit

DIAGONAL PATTERN FILL
DOT PATTERN FILL
DIAGONAL PATTERN FILL (MULTI)

  1. Revenue

  2. Profit

MIXED FILL + PATTERN (MULTI)

  1. Revenue

  2. Profit

MIXED DOTS + SOLID (DIFFERENT COLORS)

  1. Revenue

  2. Profit

FIXED WIDTH BARS (4PX)
THIN BARS WITH MULTIPLE SERIES (8PX)

  1. Revenue

  2. Profit

SPACING CONTROL — WITH VS WITHOUT BARSIZE

WITHOUT BARSIZE — BARCATEGORYGAP WORKS
WITH BARSIZE — SPACING LIMITED (KNOWN ISSUE)

FIXED WIDTH BARS — DENSE DATA

4PX BARS — MINIMAL GAP (BARCAT GAP: 0)
TESTING BARCATEGORYGAP (SINGLE SERIES)
TESTING BARGAP (MULTI-SERIES ONLY)

  1. Revenue

  2. Profit

2PX BARS — MAX DENSITY (BARCAT GAP: 1)
4PX BARS — PERCENTAGE GAP (10%)

STACKED VARIANTS

STACKED BAR CHART

  1. Revenue

  2. Profit

PERCENTAGE STACKED

  1. Large Cap

  2. Mid Cap

  3. Small Cap

NEGATIVE VALUES

WITH ROUNDED CORNERS

  1. Gains

  2. Losses

END BORDER STYLE (NEG VALUES)

  1. Gains

  2. Losses

CUSTOM STYLING

END BORDER STYLE (STACKED WITH GAP)

  1. Revenue

  2. Profit

WITH AXIS LABELS

  1. Revenue

  2. Profit

COMPACT VIEW

INTERACTIVE FEATURES

CLICK ON BARS OR LEGEND ITEMS (CHECK CONSOLE)

  1. Revenue

  2. Profit

MULTIPLE CATEGORIES

TESTING COLOR ASSIGNMENTS

  1. A

  2. B

  3. C

  4. D