Logo

Documentation v4.0.0

  • Home
  • Components
  • PieChart
Light
Dark
System

Overview

PieChart renders a donut chart using ApexCharts. Data is loaded via AJAX and each slice is defined by a name, value, and color.

Import

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

Constructor

new PieChart(element, options)
Parameter Type Description
element string | HTMLElement CSS selector string or HTMLElement.
options PieChartOptions Chart configuration options.

PieChartOptions

Property Type Default Description
width number 250 Width of the chart in pixels.
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) => PieChartResponse[] - Callback to transform the response data.

Data Format

The AJAX endpoint must return an array of PieChartResponse objects:
Property Type Description
name string Label for the slice (shown in tooltip).
data number Numeric value for the slice.
color string Color of the slice (hex code). 
[
  {"name": "Chrome", "data": 58, "color": "#009EF7"},
  {"name": "Safari", "data": 22, "color": "#50CD89"},
  {"name": "Firefox", "data": 12, "color": "#FFC700"}
]

Methods

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

Basic Example

A donut chart showing browser usage share. Click Reload to re-fetch the data.
<div id="chart" style="min-height: 250px;"></div>
<button id="reloadBtn" type="button" class="btn btn-sm btn-light-primary mt-5">Reload</button>

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

const chart = new PieChart('#chart', {
  ajax: {
    url: '/api/analytics/browsers',
  },
});

// Reload chart data
document.querySelector('#reloadBtn').addEventListener('click', () => {
  chart.reload();
});

[
  {"name": "Chrome", "data": 58, "color": "#009EF7"},
  {"name": "Safari", "data": 22, "color": "#50CD89"},
  {"name": "Firefox", "data": 12, "color": "#FFC700"},
  {"name": "Edge", "data": 5, "color": "#F1416C"},
  {"name": "Other", "data": 3, "color": "#7239EA"}
]

Custom Width Example

A larger donut chart (width: 350) showing traffic sources with a dataSrc callback.
<div id="chart" style="min-height: 350px;"></div>

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

const chart = new PieChart('#chart', {
  width: 350,
  ajax: {
    url: '/api/analytics/traffic-sources',
    dataSrc: data => {
      console.log('Total slices:', data.length);
      return data;
    },
  },
});

[
  {"name": "Direct", "data": 4200, "color": "#009EF7"},
  {"name": "Organic Search", "data": 3800, "color": "#50CD89"},
  {"name": "Referral", "data": 2100, "color": "#FFC700"},
  {"name": "Social Media", "data": 1500, "color": "#F1416C"},
  {"name": "Email", "data": 900, "color": "#7239EA"},
  {"name": "Paid Ads", "data": 600, "color": "#181C32"}
]
Previous Modal Next Tagify