Skip to main content

​
Constructor

Creates a new bar series instance. 
const barSeries = new BarSeries();

​
Properties

​
color
string
default:"#3b82f6"
Color of the bars. Defaults to Blue-500.
​
name
string
default:"Series"
Name of the series displayed in the legend.
​
visible
boolean
default:"true"
Whether the series is visible on the chart.
​
data
Point[]
default:"[]"
Array of data points to render. Each point has x and y properties.
​
barWidth
number
default:"0.8"
Width of bars relative to category width, from 0 to 1.
​
deltaMode
boolean
default:"false"
Enable delta mode to show bar heights relative to minimum value for better visualization of small variations.
​
align
'center' | 'start' | 'end'
default:"center"
Alignment of the bar relative to the X value. Use ‘start’ for histograms, ‘center’ for standard bar charts.
​
xScale
Scale | null
default:"null"
Scale instance for X-axis coordinate transformation.
​
yScale
Scale | null
default:"null"
Scale instance for Y-axis coordinate transformation.
​
animationEnabled
boolean
default:"true"
Whether animations are enabled for this series.
​
animationDuration
number
default:"600"
Duration of animations in milliseconds.

​
Methods

​
setData

Updates the series data and triggers animation if enabled.
​
data
Point[]
required
Array of data points where each point contains x and y values.
barSeries.setData([
  { x: "Q1", y: 100 },
  { x: "Q2", y: 150 },
  { x: "Q3", y: 120 },
  { x: "Q4", y: 180 }
]);

​
setScales

Sets the X and Y scales for coordinate transformation.
​
xScale
Scale
required
Scale instance for X-axis transformation.
​
yScale
Scale
required
Scale instance for Y-axis transformation.
barSeries.setScales(xScale, yScale);

​
render

Renders the bar series on the canvas. Called automatically during the chart render cycle. 
barSeries.render();

​
enableAnimation

Enables animation for the series with an optional custom duration.
​
duration
number
default:"600"
Animation duration in milliseconds.
barSeries.enableAnimation(800);

​
disableAnimation

Disables animation for the series. 
barSeries.disableAnimation();

​
startAnimation

Manually triggers the render animation. 
barSeries.startAnimation();

​
getDataAt

Returns the data point at the given position if it intersects with a bar.
​
point
Point
required
Position to query, typically mouse coordinates in pixels.
​
return
Point | null
The data point if the position intersects with a bar, or null otherwise.
const dataPoint = barSeries.getDataAt({ x: 100, y: 200 });

​
Data format

Bar series accepts an array of Point objects: 
const data: Point[] = [
  { x: "Product A", y: 100 },
  { x: "Product B", y: 150 },
  { x: "Product C", y: 120 },
  { x: "Product D", y: 180 }
];

​
Configuration

When using the Chart API, configure bar series through the series config:
BarSeriesConfig
interface BarSeriesConfig {
  type: "bar";
  data: Point[];
  color?: string;
  visible?: boolean;
  name?: string;
  barWidth?: number;
  deltaMode?: boolean;
  align?: "center" | "start" | "end";
  stacked?: boolean;
}

​
Bar width

The barWidth property controls how much of the available space each bar occupies: 
// Thin bars (40% of category width)
barSeries.barWidth = 0.4;

// Default bars (80% of category width)
barSeries.barWidth = 0.8;

// Full width bars (100% of category width)
barSeries.barWidth = 1.0;

​
Delta mode

Delta mode is useful for visualizing small variations in data by adjusting the baseline: 
barSeries.deltaMode = true;
When enabled:
  • Bars start from the minimum value in the dataset (with 10% buffer)
  • Better highlights differences when all values are large and similar
  • Automatically calculates appropriate baseline

​
Bar alignment

Control how bars align relative to their X position:
Default alignment, centers bars on their X value:
barSeries.align = "center";
Use for standard bar charts.

​
Animation

By default, bar series animates on initial render and data updates. The animation:
  • Uses easeOutCubic easing function
  • Grows bars from baseline to target height
  • Duration is 600ms by default
  • Can be customized or disabled
// Customize animation duration
barSeries.enableAnimation(1000);

// Disable animation
barSeries.disableAnimation();

​
Stacking

Bar stacking is handled by the Chart class, which preprocesses data and adds y0 properties to each point. When a point has a y0 property, the bar is drawn from y0 to y instead of from 0 to y.

Build docs developers (and LLMs) love

Get started for freeTalk to us