Logo

Documentation v4.0.0

  • Home
  • Components
  • BarChart
Light
Dark
System

Overview

BarChart renders a bar (or column) chart using ApexCharts. Data is loaded via AJAX and the chart supports horizontal mode, axis formatting, data labels, and tooltips.

Import

import {components} from 'metronic-extension';
const {BarChart} = components;

Constructor

new BarChart(element, options)
Parameter Type Description
element string | HTMLElement CSS selector string or HTMLElement for the chart container.
options BarChartOptions Chart configuration options (see below).

BarChartOptions

Property Type Default Description
horizontal boolean false If true, renders a horizontal bar chart instead of vertical columns.
ajax.method 'GET' | 'POST' | 'PUT' 'GET' HTTP method for the data request.
ajax.url string - URL to fetch chart data. Required.
ajax.data (data: object) => object - Callback to modify request data before sending.
ajax.dataSrc (data) => BarChartResponse[] - Callback to transform the response data.
xAxisFormatter (value) => string - Formats X-axis label display values.
yAxisFormatter (value) => string - Formats Y-axis label display values.
dataLabelFormatter (value) => string | number - Formats the value displayed on each bar.
tooltipDataFormatter (value) => string - Formats the tooltip data value.

Methods

Method Return Description
reload() Promise<void> Reloads chart data from the server and redraws the chart.

Data Format

The server should return an array of BarChartResponse objects:
// BarChartResponse
{
  category: string;  // Category label (X-axis)
  name: string;      // Series name (legend)
  data: number;      // Value
  color?: string;    // Optional bar color (hex)
}

Basic Example

A vertical bar chart with multiple series, formatted axis labels, and a reload button.
<div id="chart" style="min-height: 350px;"></div>
<button id="reloadBtn" type="button" class="btn btn-sm btn-primary">Reload</button>

import {components} from 'metronic-extension';
const {BarChart} = components;

const chart = new BarChart('#chart', {
  ajax: {
    url: '/api/sales/monthly',
  },
  yAxisFormatter: value => Number(value).toLocaleString(),
  dataLabelFormatter: value => Number(value).toLocaleString(),
});

document.querySelector('#reloadBtn').addEventListener('click', async () => {
  await chart.reload();
});

// Sample JSON — /api/sales/monthly
[
  {"category": "Jan", "name": "Sales", "data": 4200, "color": "#009EF7"},
  {"category": "Jan", "name": "Revenue", "data": 3800, "color": "#50CD89"},
  {"category": "Feb", "name": "Sales", "data": 5100, "color": "#009EF7"},
  {"category": "Feb", "name": "Revenue", "data": 4200, "color": "#50CD89"},
  ...
]

Horizontal Example

Set horizontal: true to render bars horizontally. The chart height is automatically calculated based on the number of data items.
<div id="chart"></div>

import {components} from 'metronic-extension';
const {BarChart} = components;

new BarChart('#chart', {
  horizontal: true,
  ajax: {
    url: '/api/visits/by-device',
  },
  xAxisFormatter: value => Number(value).toLocaleString(),
  dataLabelFormatter: value => Number(value).toLocaleString(),
});

// Sample JSON — /api/visits/by-device
[
  {"category": "Desktop", "name": "Visits", "data": 12500, "color": "#009EF7"},
  {"category": "Mobile", "name": "Visits", "data": 9800, "color": "#009EF7"},
  {"category": "Tablet", "name": "Visits", "data": 4200, "color": "#009EF7"},
  {"category": "Smart TV", "name": "Visits", "data": 1500, "color": "#009EF7"}
]
Previous APIClient Next BlockUI