Overview

Pie chart based on ApexCharts.

Reference

Instance Methods
Name Description
public constructor() Create a new instance of the PieChart class.
Parameters:
  • element: string|HTMLElement|JQuery
    HTMLElement selector, element, or JQuery object.
  • options: PieChartOptions
    Chart options.
    • width?: number
      Width of the chart in pixels. Default is 250.
    • 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.
      • data: number
        Data Value. This option is required.
      • color: string
        Color of slice. This option is required.
    • 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: PieChartResponse[]|any) => PieChartResponse[]
      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;
}
public reload() Redraw the chart.
Return:
  • Promise<void>
Name Description
public instance: ApexCharts|undefined Read-only ApexCharts instance.

Basic 

              <div id="piechart" class="mx-auto"></div>
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const piechart = new components.PieChart(document.getElementById('piechart'), {
  width: 400,
  ajax: {
    url: 'json/piechart.json'
  },
});
This chart loads data via Ajax. The latest data loaded is shown below.
              [
  {"name": "Series1", "data": 44, "color": "#7239EA"},
  {"name": "Series2", "data": 55, "color": "#50CD89"},
  {"name": "Series3", "data": 41, "color": "#009EF7"},
  {"name": "Series4", "data": 17, "color": "#F1416C"}
]