Bar charts display data using rectangular bars with lengths proportional to the values they represent. Chartist's BarChart class supports both vertical and horizontal orientations, multiple series, and stacked bar configurations.
Creates bar charts with support for horizontal/vertical orientation and multiple series.
/**
* Bar chart implementation extending BaseChart
* @param query - CSS selector string or DOM element
* @param data - Chart data with labels and series
* @param options - Chart configuration options
* @param responsiveOptions - Responsive breakpoint configurations
*/
class BarChart extends BaseChart {
constructor(
query: string | Element | null,
data: BarChartData,
options?: BarChartOptions,
responsiveOptions?: ResponsiveOptions<BarChartOptions>[]
);
/** Update chart with new data and options */
update(data?: BarChartData, options?: BarChartOptions, override?: boolean): BarChart;
/** Detach chart from DOM and clean up */
detach(): BarChart;
}Usage Examples:
import { BarChart } from "chartist";
// Basic vertical bar chart
const chart = new BarChart('.chart-container', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
[5, 2, 4, 2, 0]
]
});
// Horizontal bar chart
const horizontalChart = new BarChart('.chart-container', {
labels: ['Product A', 'Product B', 'Product C'],
series: [
[20, 15, 18]
]
}, {
horizontalBars: true,
height: 200
});
// Multi-series bar chart
const multiSeriesChart = new BarChart('.chart-container', {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 1400000, 1300000],
[200000, 400000, 500000, 300000],
[100000, 200000, 400000, 600000]
]
}, {
seriesBarDistance: 10,
axisX: {
offset: 60
},
axisY: {
offset: 80,
labelInterpolationFnc: (value) => {
return value / 1000 + 'k';
},
scaleMinSpace: 15
}
});Data structure for bar charts supporting multiple series with optional metadata.
interface BarChartData {
/** Optional array of label strings for categories */
labels?: string[];
/** Array of data series - can be number arrays or SeriesObject */
series: (number[] | SeriesObject)[];
}Configuration options for bar chart appearance and behavior.
interface BarChartOptions {
/** Chart width in pixels */
width?: number;
/** Chart height in pixels */
height?: number;
/** Display bars horizontally instead of vertically */
horizontalBars?: boolean;
/** Distance between bars in same series */
seriesBarDistance?: number;
/** Stack multiple series on top of each other */
stackBars?: boolean;
/** Use full width of container */
fullWidth?: boolean;
/** Reverse data order */
reverseData?: boolean;
/** Padding around chart content */
chartPadding?: ChartPadding;
/** Low value for chart bounds */
low?: number;
/** High value for chart bounds */
high?: number;
/** Only use integer values on scale */
onlyInteger?: boolean;
/** Reference value for zero line */
referenceValue?: number;
/** X-axis configuration */
axisX?: AxisOptions;
/** Y-axis configuration */
axisY?: AxisOptions;
/** Series-specific options */
series?: { [name: string]: BarSeriesOptions };
/** CSS class names for styling */
classNames?: {
chart?: string;
chartBar?: string;
chartLabel?: string;
chartGrid?: string;
horizontal?: string;
vertical?: string;
};
}
interface BarSeriesOptions {
/** CSS class name for this series */
className?: string;
/** Metadata for this series */
meta?: any;
}Event types for handling bar drawing and interactions.
interface BarChartCreatedEvent {
type: 'created';
svg: Svg;
options: BarChartOptionsWithDefaults;
responsiveOptions: ResponsiveOptions[];
}
interface BarDrawEvent {
type: 'draw';
element: Svg;
x1: number;
y1: number;
x2: number;
y2: number;
chartRect: ChartRect;
index: number;
seriesIndex: number;
group: Svg;
value: number;
series: SeriesObject;
meta: any;
}Event Usage Examples:
const chart = new BarChart('.chart-container', data);
// Customize bar appearance
chart.on('draw', (data: BarDrawEvent) => {
if (data.type === 'bar') {
// Add gradient effect to bars
data.element.attr({
'stroke-width': '2px',
'stroke': '#333'
});
// Add animation
data.element.attr({
'opacity': 0
}).animate({
'opacity': 1
}, 500, 'easeOutQuint');
}
});
// Handle chart creation
chart.on('created', (data: BarChartCreatedEvent) => {
console.log('Bar chart created with options:', data.options);
});Create stacked bar charts by enabling the stackBars option.
const stackedChart = new BarChart('.chart-container', {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[800000, 1200000, 1400000, 1300000], // Revenue
[200000, 400000, 500000, 300000], // Costs
[100000, 200000, 400000, 600000] // Profit
]
}, {
stackBars: true,
axisY: {
labelInterpolationFnc: (value) => {
return (value / 1000) + 'k';
}
}
});Bar charts adapt to different screen sizes with responsive options.
const responsiveChart = new BarChart('.chart-container', data, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true
}, [
// Mobile breakpoint
['screen and (max-width: 640px)', {
horizontalBars: false,
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: (value, index) => {
return index % 2 === 0 ? value : null;
}
}
}],
// Tablet breakpoint
['screen and (min-width: 641px) and (max-width: 1024px)', {
height: 300,
seriesBarDistance: 8
}]
]);