Logo

Documentation v4.0.0

  • Home
  • Components
  • LineChart
Light
Dark
System

Overview

LineChart renders a line chart (with optional gradient fill) using ApexCharts. Data is loaded via AJAX and supports multiple series, axis formatting, and tooltips.

Import

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

Constructor

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

LineChartOptions

Property Type Default Description
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) => LineChartResponse[] - Callback to transform the response data.
gradient boolean true When true, fills the area under the line with a gradient.
lineWidth number 1 Line width in pixels.
xAxisTickAmount number auto Number of tick intervals on the X-axis.
xAxisFormatter (value) => string - Formats X-axis label display values.
yAxisOpposite boolean false When true, draws the Y-axis on the right side.
yAxisFormatter (value) => string - Formats Y-axis label display values.
tooltipDataFormatter (value) => string - Formats the tooltip data value.

Data Format

The AJAX endpoint should return an array of objects with the following structure:
Field Type Description
category string X-axis category label (e.g. month name, date).
name string Series name (used for legend and tooltip).
data number Data value for this category and series.
color? string Optional line color (hex). Defaults to #009EF7.

Methods

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

Basic Example

A line chart with gradient fill and multiple series. Click "Reload" to re-fetch the data.
<div id="chart" style="height: 350px;"></div>
<button id="reloadBtn" type="button" class="btn btn-sm btn-primary">Reload</button>

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

const chart = new LineChart('#chart', {
  ajax: { url: '/api/analytics/visits' },
  gradient: true,
  lineWidth: 2,
  yAxisFormatter: value => Number(value).toLocaleString(),
  tooltipDataFormatter: value => Number(value).toLocaleString(),
});

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

[
  {"category": "Jan", "name": "Visits", "data": 3200, "color": "#009EF7"},
  {"category": "Jan", "name": "Unique Visitors", "data": 1800, "color": "#50CD89"},
  {"category": "Feb", "name": "Visits", "data": 4100, "color": "#009EF7"},
  {"category": "Feb", "name": "Unique Visitors", "data": 2400, "color": "#50CD89"},
  ...
]

No Gradient Example

A line chart without gradient fill. Set gradient: false for a clean line-only look.
<div id="chart" style="min-height: 350px;"></div>

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

new LineChart('#chart', {
  ajax: { url: '/api/analytics/pageviews' },
  gradient: false,
  lineWidth: 3,
  yAxisFormatter: value => Number(value).toLocaleString(),
});

[
  {"category": "Mon", "name": "Page Views", "data": 1200, "color": "#F1416C"},
  {"category": "Tue", "name": "Page Views", "data": 1800, "color": "#F1416C"},
  {"category": "Wed", "name": "Page Views", "data": 2200, "color": "#F1416C"},
  {"category": "Thu", "name": "Page Views", "data": 1600, "color": "#F1416C"},
  {"category": "Fri", "name": "Page Views", "data": 2800, "color": "#F1416C"},
  {"category": "Sat", "name": "Page Views", "data": 3400, "color": "#F1416C"},
  {"category": "Sun", "name": "Page Views", "data": 2600, "color": "#F1416C"}
]
Previous ImageInput Next Modal