UI Components
Bar Chart

Bar Chart

Bar chart supporting vertical and horizontal orientation with grouped and stacked modes. Useful for comparing discrete categories or aggregated values across sources.

Category: charts · Maturity: beta

Installation

npx @plexus/cli add bar-chart

Usage

import { BarChart } from '@plexus/ui'
 
function ComparisonView({ data }) {
  return (
    <BarChart
      data={data}
      categories={['Rig A', 'Rig B', 'Rig C']}
      series={[
        { key: 'temperature', label: 'Avg Temperature', color: '#f97316' },
        { key: 'vibration', label: 'Avg Vibration', color: '#8b5cf6' },
      ]}
      orientation="vertical"
      mode="grouped"
      width={800}
      height={400}
    />
  )
}

Performance

SpecValue
Max data points10,000+
Target FPS60
Typical memory~20 MB
RendererWebGPU (WebGL2 fallback)

Aerospace Use Cases

  • Fleet comparison — Compare aggregate metrics across multiple devices or test rigs
  • Categorical summaries — Display pass/fail counts, error rates, or operational hours by category
  • Stacked breakdowns — Show how individual metrics contribute to totals across groups

Related Components