Bar Charts
10 bar chart variants rendered live with Canvas2D. Hover, click, and watch animations — every chart below is powered by DiCharts.createBarChart()
Bar Chart
Standard vertical bar chart with positive/negative auto-colouring and animated entry.
Bar Chart - Horizontal
Horizontal orientation — ideal for ranking comparisons and long category names.
Bar Chart - Multiple
Grouped series mode — multiple named values per category displayed side-by-side.
Bar Chart - Stacked + Legend
Stacked series bars with auto-generated legend — great for part-to-whole comparisons.
Bar Chart - Label
Value labels displayed outside (above) each bar for quick readability.
Bar Chart - Custom Label
Horizontal bars with inside labels and a custom dollar formatter — no visible axes.
Bar Chart - Mixed
Per-bar custom colours for categorical data — apply any colour scale per data point.
Bar Chart - Interactive
Hover to highlight a bar and see a rich tooltip. Non-hovered bars dim to 30% opacity.
Bar Chart - Active
Programmatic active index — the 3rd bar stays highlighted. Click any bar or call setActiveIndex().
Bar Chart - Negative
Mixed positive/negative values with a zero-line — green for gains, red for losses.
All variants, one API
Every chart above is created with a single DiCharts.createBarChart(container, options) call. Switch between vertical/horizontal with orientation, enable grouped/stacked series with seriesData + stacked, add animations with animation, and make it interactive with interactive + showTooltip. Pure Canvas2D — works in every browser, no WebGPU required.