Bundle requirement

Requires velo-plot/scientific or velo-plot/trading (or velo-plot/full). Core entry throws for bar series.

Bar Charts API

Bar charts are used for categorical data or discrete measurements. They support automatic width calculation and custom styling.

Adding a Bar Series

You can add a bar series using the addSeries method with type: 'bar' or the addBar convenience method.

import { createChart } from 'velo-plot/scientific'

const chart = createChart({ container: document.getElementById('chart')! })

chart.addBar({
  id: 'my-bars',
  data: {
    x: [1, 2, 3, 4],
    y: [10, 20, 15, 25]
  },
  style: {
    color: '#00f2ff',
    barWidth: 0.8
  }
});

BarOptions

Property	Type	Description
id	string	Unique identifier for the series.
type	'bar'	Must be 'bar'.
data	SeriesData	X and Y coordinates.
style	BarStyle	Optional styling configuration.
visible	boolean	Visibility toggle (default: true).

BarStyle

Property	Type	Description
color	string	Fill color (CSS format).
opacity	number	Transparency (0.0 to 1.0).
barWidth	number	Width in data units. If omitted, it's auto-calculated.
barGap	number	Gap between bars (0.0 to 1.0) as fraction of width.
barAlign	'center' | 'edge'	Alignment relative to X coordinate.

Automatic Width Calculation

The engine automatically determines the optimal bar width if barWidth is not provided. It calculates the minimum distance between adjacent X values and applies a default gap (20%) to avoid overlapping and maintain visual breathing room.

Known limitations

• Bundle entry — pick velo-plot, velo-plot/trading, velo-plot/scientific, or velo-plot/full. See Bundle Architecture.
• WebGPU renderer (renderer: 'webgpu') requires an extended bundle entry and is experimental — use WebGL (default) for production.
• SVG — exportSVG() and renderer: 'svg' require an extended bundle. LaTeX labels and contour overlays are partial; 3D is not supported in SVG. See SVG examples.
• See Plugin status registry for plugin maturity (complete, partial, experimental).