← Back to Data Visualization

Ready-to-use chart components built with consistent styling and accessibility in mind. Each component is designed to integrate seamlessly with your Neobrutalist design system.

Bar Chart

Perfect for comparing discrete categories

Props

dataxKeyyKeycolorheight

Best for

Sales by region, user counts, categorical comparisons

Q1
75
Q2
80
Q3
60
Q4
100

import { BarChart } from '@/components/charts/BarChart'

const data = [
  { category: 'Q1', value: 75 },
  { category: 'Q2', value: 80 },
  { category: 'Q3', value: 60 },
  { category: 'Q4', value: 100 }
]

<BarChart
  data={data}
  xKey="category"
  yKey="value"
  color="#3b82f6"
  height={300}
/>

Line Chart

Ideal for showing trends and changes over time

Props

dataxKeyyKeycolorsmoothshowDots

Best for

Time series data, trends, performance metrics


import { LineChart } from '@/components/charts/LineChart'

const data = [
  { month: 'Jan', revenue: 12000 },
  { month: 'Feb', revenue: 15000 },
  { month: 'Mar', revenue: 18000 },
  { month: 'Apr', revenue: 22000 },
  { month: 'May', revenue: 25000 }
]

<LineChart
  data={data}
  xKey="month"
  yKey="revenue"
  color="#10b981"
  smooth={true}
  showDots={true}
/>

Area Chart

Shows cumulative data and filled areas

Props

dataxKeyyKeycolorgradientstacked

Best for

Cumulative data, multiple series, volume over time


import { AreaChart } from '@/components/charts/AreaChart'

const data = [
  { month: 'Jan', users: 1000, sessions: 2500 },
  { month: 'Feb', users: 1500, sessions: 3200 },
  { month: 'Mar', users: 1800, sessions: 3800 },
  { month: 'Apr', users: 2200, sessions: 4500 }
]

<AreaChart
  data={data}
  xKey="month"
  yKey="users"
  color="#8b5cf6"
  gradient={true}
  stacked={false}
/>

Pie Chart

Perfect for showing proportions and percentages

Props

datavalueKeylabelKeycolorsshowLabels

Best for

Market share, budget allocation, categorical proportions


import { PieChart } from '@/components/charts/PieChart'

const data = [
  { category: 'Desktop', value: 45, color: '#3b82f6' },
  { category: 'Mobile', value: 35, color: '#10b981' },
  { category: 'Tablet', value: 20, color: '#f59e0b' }
]

<PieChart
  data={data}
  valueKey="value"
  labelKey="category"
  showLabels={true}
  centerLabel="Total: 100%"
/>

Scatter Plot

Shows relationships between two variables

Props

dataxKeyyKeysizeKeycolorKeyshowTrendline

Best for

Correlation analysis, data distribution, outlier detection


import { ScatterPlot } from '@/components/charts/ScatterPlot'

const data = [
  { x: 10, y: 20, size: 5, category: 'A' },
  { x: 20, y: 25, size: 8, category: 'B' },
  { x: 30, y: 15, size: 6, category: 'A' },
  { x: 40, y: 30, size: 10, category: 'C' }
]

<ScatterPlot
  data={data}
  xKey="x"
  yKey="y"
  sizeKey="size"
  colorKey="category"
  showTrendline={true}
/>

Gauge Chart

Displays single values within a range

Props

valueminmaxlabelcolorshowValue

Best for

KPIs, progress indicators, performance metrics

75%

import { GaugeChart } from '@/components/charts/GaugeChart'

<GaugeChart
  value={75}
  min={0}
  max={100}
  label="Performance"
  color="#ec4899"
  showValue={true}
  thresholds={[
    { value: 30, color: '#ef4444' },
    { value: 70, color: '#f59e0b' },
    { value: 100, color: '#10b981' }
  ]}
/>

Component Structure

// Base chart component structure
interface ChartProps {
  data: any[]
  width?: number
  height?: number
  color?: string
  className?: string
}

export function Chart({
  data,
  width = 400,
  height = 300,
  color = '#3b82f6',
  className = ''
}: ChartProps) {
  return (
    <div className={`chart-container ${className}`}>
      <svg width={width} height={height}>
        {/* Chart implementation */}
      </svg>
    </div>
  )
}

Best Practices

  • • Use semantic colors from your design system
  • • Provide accessible color contrasts (WCAG 2.1 AA)
  • • Include ARIA labels and descriptions
  • • Support keyboard navigation where applicable
  • • Provide alternative text representations
  • • Use consistent spacing and typography
  • • Optimize for different screen sizes

Recharts

React charting library built on D3

npm install recharts

Chart.js

Flexible JavaScript charting library

npm install chart.js

D3.js

Data visualization with full control

npm install d3