Area Chart

Area chart with filled regions and stacked series support. Combines the time-series capability of the line chart with filled areas to emphasize volume and composition over time.

Category: charts · Maturity: beta

Installation

npx @plexus/cli add area-chart

Usage

import { AreaChart } from '@plexus/ui'
 
function ResourceView({ data }) {
  return (
    <AreaChart
      data={data}
      series={[
        { key: 'cpu', label: 'CPU', color: '#3b82f6' },
        { key: 'memory', label: 'Memory', color: '#8b5cf6' },
        { key: 'network', label: 'Network', color: '#22c55e' },
      ]}
      stacked
      xAxis={{ label: 'Time', type: 'time' }}
      yAxis={{ label: 'Usage (%)' }}
      width={800}
      height={400}
    />
  )
}

Performance

Aerospace Use Cases

• Resource utilization — Visualize stacked CPU, memory, and network usage across embedded compute modules
• Power consumption — Show how subsystem power draw adds up to total system consumption over time
• Signal composition — Display overlapping frequency bands or composite sensor readings

Related Components