Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Line Chart API

Line micro chart displays a compact trend line for small data series. Use it inside KPI cards, table cells, summaries, dense admin panels, reports, or as a simple dashboard chart when a small line chart is enough.

Use full ECharts charts for complex analytics, detailed axes, legends, drilldown, zooming, or advanced chart interactions.

Key Features:
  • Customizable Curves: Choose from various curve types like linear, catmull-rom, and bump.
  • Area Fill: Easily add a filled area under the line with support for gradients.
  • Interactive Markers: Display markers on data points and interactive tooltips.
  • Responsive Design: Automatically adjusts to fit the container size.
PropTypeDefault
data
Array of numbers to be displayed in the chart
number[][]
labels
Array of labels corresponding to data points
any[][]
strokeWidth
Width of the line
number2
showArea
Whether to show the filled area under the line
booleanfalse
showMarkers
Whether to show markers on data points
booleanfalse
responsive
Whether the chart should be responsive to container size
booleanfalse
fillAreaGradient
Whether to use a gradient for the filled area
booleanfalse
curve
Type of curve for the line (linear, catmullRom, curveBumpX, curveStep)
MchartLineCurveType'linear'
compact
Whether to use compact mode (starts y-axis from minimum value)
booleanfalse
markerDotSize
Size of the markers
number5
tooltip
Template for the custom tooltip
TemplateRef<unknown>undefined
tooltipPosition
Position of the tooltip
OverlayPosition'after-center'