Bar Chart Component

The Bar Chart component provides an intuitive way to display data comparisons. It features smooth animations, responsive design, and comprehensive accessibility support.

Key Features

• Responsive Design: Automatically adjusts to container size

• Interactive Elements: Hover states, tooltips, and click events

• Multiple Datasets: Support for comparing multiple data series

• Customizable: Flexible styling, colors, and configuration options

• Accessibility: ARIA support and screen reader compatibility

Basic Usage

Create a simple bar chart with a single dataset. The color accepts a CSS color value or a variable.

1
<BarChart
2
    data={{
3
        datasets: [{
4
            label: 'Sales', values: [10, 25, 30, 55, 85],
5
            color: '--color-primary',
6
            hoverColor: '--color-secondary',
7
            tooltip: 'Sales',
8
            opacity: 0.5
9
        }],
10
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
11
    }}
12
    title="Business Sales"
13
    subtitle="Sales by day"
14
/>

Multiple Datasets

Compare multiple data series in one chart:

1
<BarChart
2
    data={{
3
        datasets: [
4
            { label: 'Sales 2023', values: [30, 45, 60], color: '#4CAF50' },
5
            { label: 'Sales 2024', values: [45, 55, 70], color: '#2196F3' }
6
        ],
7
        labels: ['Q1', 'Q2', 'Q3']
8
    }}
9
/>

Horizontal Orientation

Display bars horizontally for different visualization needs:

1
<BarChart
2
    data={{
3
        datasets: [
4
            { label: 'Series 1', values: [30, 45, 60], color: '--color-tertiary' }
5
        ],
6
        labels: ['Category A', 'Category B', 'Category C']
7
    }}
8
    options={{
9
        orientation: 'horizontal',
10
        showLines: true
11
    }}
12
/>

Dataset Properties

Each dataset in the datasets array supports these properties:

1
interface Dataset {
2
    label: string;      // Name of the data series
3
    values: number[];   // Array of numeric values
4
    color?: string;     // Bar color (CSS color value or variable)
5
    hoverColor?: string; // Color when hovering
6
    opacity?: number;    // Bar opacity (0-1)
7
    tooltip?: string;    // Custom tooltip text
8
}`

Chart Options

Customize the chart behavior and appearance:

1
interface BarChartOptions {
2
  orientation?: 'horizontal' | 'vertical';
3
  showLines?: boolean;
4
  valueMin?: number;
5
  valueMax?: number;
6
  valueStep?: number;
7
}

Interactive Demo

Try out different chart configurations:

Events

The chart emits custom events for interaction:

1
// Emitted when a bar is clicked
2
CustomEvent<{
3
  label?: string; // X-axis label
4
  value: number; // Bar value
5
  index: number; // Data index
6
}>;

1
// Emitted when chart data changes
2
CustomEvent<{
3
  data: BarChartData;
4
  options?: BarChartOptions;
5
}>;

Bar Chart Props API

Bar Chart Functions API

Value Format

The valueFormat function is used to format the value axis tick labels. It takes a number and returns a string.

1
import { ready } from '@/components/NST-components/base';
2
import type { BarChartElement } from '@/components/NST-components/UI/charts/bar/data';
3

4
const valueFormatChart = await ready(
5
  document.querySelector<BarChartElement>('#value-format-chart')
6
);
7
if (valueFormatChart) {
8
  valueFormatChart.valueFormat = (value: number) => `$${value.toFixed(2)}`;
9
}

Accessibility Features

The Bar Chart component includes several accessibility enhancements:

• ARIA labels for data points
• Keyboard navigation support
• Screen reader descriptions
• High contrast support through theming