Overview

Bar chart based on ApexCharts.

Reference

Instance Methods
Name Description
public constructor() Create a new instance of the BarChart class.
Parameters:
  • element: string|HTMLElement|JQuery
    HTMLElement selector, element, or JQuery object.
  • options: BarChartOptions
    Chart options.
    • horizontal?: boolean
      This option will turn a column chart into a horizontal bar chart. Default is false.
    • ajax.method?: 'GET'|'POST'|'PUT'
      HTTP method of the request. Default is "GET".
    • ajax.url: string
      URL to request. This option is required. The response must return an array of the following type. If it returns a different type, use the ajax.dataSrc option to convert it.
      • name: string
        Data name. This value is used in tooltips and other displays. This option is required.
      • category: string
        Category name. Data will be grouped by category and each data will be displayed in the chart as a child of the category. This option is required.
      • data: number
        Data Value. This option is required.
      • color?: string
        Bar color. Default is "#009EF7".
    • ajax.data?: (data: object) => object
      Callback function to add or change data to be sent to the server. Default is none (undefined). 
                                      data: data => {
  data.extra = 'Extra';
}
    • ajax.dataSrc?: (data: BarChartResponse[]|any) => BarChartResponse[]
      Callback function to add or modify data retrieved from the server. Default is none (undefined). 
                                      dataSrc: data => {
  // Calculate and display data totals.
  const total = data.reduce((total, item) => {
    return total + item.data;
  }, 0);
  document.getElementById('total').textContent = total;

  // Returns data to be drawn on the chart.
  return data;
}
    • xAxisFormatter?: (value: string|number) => string
      Callback function to change the display value of the X-axis label.
      The default is none (undefined), which displays the original value. 
                                      xAxisFormatter: value => {
  // Converts values to a locale-specific format and displays them.
  return Number(value).toLocaleString();
}
    • yAxisFormatter?: (value: string|number) => string
      Callback function to change the display value of the Y-axis label.
      The default is none (undefined), which displays the original value. 
                                      yAxisFormatter: value => {
  // Converts values to a locale-specific format and displays them.
  return Number(value).toLocaleString();
}
    • dataLabelFormatter: (value: string|number) => string|number
      Callback function to change the value displayed on the bar. Default is none (undefined), displaying the original value. 
                                      dataLabelFormatter: value => {
  // Converts values to a locale-specific format and displays them.
  return Number(value).toLocaleString();
}
    • tooltipDataFormatter?: (value: number) => string
      A callback function that changes the value displayed in the numeric data on the tooltip. Default is none (undefined), displaying the original value.
public reload() Redraw the chart.
Return:
  • Promise<void>
Instance Properties
Name Description
public instance: ApexCharts|undefined Read-only ApexCharts instance.

Horizontal 

              <!--begin::Wrapper-->
<div class="d-flex flex-stack flex-wrap mb-5">
  <!--begin::Search-->
  <div class="d-flex align-items-center position-relative my-1 mb-2 mb-md-0">
    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
    <span class="svg-icon svg-icon-1 position-absolute ms-4">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
      </svg>
    </span>
    <!--end::Svg Icon-->
    <input id="horizontalBarChartKeyword" type="text" class="form-control form-control-solid w-300px ps-15" placeholder="Search by name" maxlength="20" />
  </div>
  <!--end::Search-->
</div>
<!--end::Wrapper-->
<!--begin::Chart-->
<div id="horizontalBarChart"></div>
<!--end::Chart-->
            
              import {components} from 'metronic-extension';

const initHorizontalBarChart = () => {
  return new components.BarChart(document.getElementById('horizontalBarChart'), {
    horizontal: true,
    ajax: {
      url: 'json/barchart.json',
      dataSrc: data => {
        // Filter chart data by categories matching the entered keywords.
        // Normally, use the ajax.data option to set the keywords as request parameters and perform the filtering on the server side.
        const keyword = horizontalBarChartKeyword.value.replace(/^[\s　]+|[\s　]+$/g, '');
        if (!keyword)
          // If the keyword is empty, all data is displayed.
          return data;

        // Return only data with keywords in the name.
        return data.filter(item => item.category.includes(keyword));
      },
    },
    xAxisFormatter: value => {
      // Comma-separate the values.
      return Number(value).toLocaleString();
    },
    dataLabelFormatter: value => {
      // Comma-separate the values and add units.
      return `${Number(value).toLocaleString()} items`;
    },
    tooltipDataFormatter: value => {
      // Comma-separate the values and add units.
      return `${Number(value).toLocaleString()} items`;
    },
  });
}

const initHorizontalBarChartSearchForm = () => {
  // Timer to prevent duplicate filtering runs.
  let searchTimer;
  horizontalBarChartKeyword.addEventListener('input', () => {
    // Cancel a reserved filtering request.
    if (searchTimer)
      clearTimeout(searchTimer);

    // Scheduled filtering runs.
    searchTimer = setTimeout(() => {
      // Filtering chart data.
      horizontalBarChart.reload();
    }, 1000);
  });
}

// Search keyword input field.
const horizontalBarChartKeyword = document.getElementById('horizontalBarChartKeyword');

// Initialize the component and set up event listeners.
const horizontalBarChart = initHorizontalBarChart();
initHorizontalBarChartSearchForm();
This chart loads data via Ajax. The latest data loaded is shown below.
              [
  {"name": "Series1", "category": "Category1", "data": 400, "color": "#50CD89"},
  {"name": "Series1", "category": "Category2", "data": 448, "color": "#50CD89"},
  {"name": "Series1", "category": "Category3", "data": 540, "color": "#50CD89"},
  {"name": "Series2", "category": "Category1", "data": 430, "color": "#7239EA"},
  {"name": "Series2", "category": "Category2", "data": 470, "color": "#7239EA"},
  {"name": "Series2", "category": "Category3", "data": 580, "color": "#7239EA"}
]

Vertical 

              <!--begin::Wrapper-->
<div class="d-flex flex-stack flex-wrap mb-5">
  <!--begin::Search-->
  <div class="d-flex align-items-center position-relative my-1 mb-2 mb-md-0">
    <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
    <span class="svg-icon svg-icon-1 position-absolute ms-4">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
      </svg>
    </span>
    <!--end::Svg Icon-->
    <input id="verticalBarChartKeyword" type="text" class="form-control form-control-solid w-300px ps-15" placeholder="Search by name" maxlength="20" />
  </div>
  <!--end::Search-->
</div>
<!--end::Wrapper-->
<!--begin::Chart-->
<div id="verticalBarChart" class="h-325px"></div>
<!--end::Chart-->
            
              import {components} from 'metronic-extension';

const initVerticalBarChart = () => {
  return new components.BarChart(document.getElementById('verticalBarChart'), {
    horizontal: false,
    ajax: {
      url: 'json/barchart.json',
      dataSrc: data => {
        // Filter chart data by categories matching the entered keywords.
        // Normally, use the ajax.data option to set the keywords as request parameters and perform the filtering on the server side.
        const keyword = verticalBarChartKeyword.value.replace(/^[\s　]+|[\s　]+$/g, '');
        if (!keyword)
          // If the keyword is empty, all data is displayed.
          return data;

        // Return only data with keywords in the name.
        return data.filter(item => item.category.includes(keyword));
      },
    },
    yAxisFormatter: value => {
      // Comma-separate the values.
      return Number(value).toLocaleString();
    },
    dataLabelFormatter: value => {
      // Comma-separate the values.
      return Number(value).toLocaleString();
    },
    tooltipDataFormatter: value => {
      // Comma-separate the values.
      return `${Number(value).toLocaleString()} items`;
    },
  });
}

const initVerticalBarChartSearchForm = () => {
  // Timer to prevent duplicate filtering runs.
 let searchTimer;
  verticalBarChartKeyword.addEventListener('input', () => {
    // Cancel a reserved filtering request.
    if (searchTimer)
      clearTimeout(searchTimer);

    // Scheduled filtering runs.
    searchTimer = setTimeout(() => {
      // Filtering chart data.
      verticalBarChart.reload();
    }, 1000);
  });
}

// Search keyword input field.
const verticalBarChartKeyword = document.getElementById('verticalBarChartKeyword');

// Initialize the component and set up event listeners.
const verticalBarChart = initVerticalBarChart();
initVerticalBarChartSearchForm();
This chart loads data via Ajax. The latest data loaded is shown below.
              [
  {"name": "Series1", "category": "Category1", "data": 400, "color": "#50CD89"},
  {"name": "Series1", "category": "Category2", "data": 448, "color": "#50CD89"},
  {"name": "Series1", "category": "Category3", "data": 540, "color": "#50CD89"},
  {"name": "Series2", "category": "Category1", "data": 430, "color": "#7239EA"},
  {"name": "Series2", "category": "Category2", "data": 470, "color": "#7239EA"},
  {"name": "Series2", "category": "Category3", "data": 580, "color": "#7239EA"}
]