Charts Components

A comprehensive chart library built on ApexCharts with React integration, providing enterprise-grade data visualization components with theme support and responsive design.

ApexCharts React 19 TypeScript Responsive

Available Chart Types

Line Chart

Smooth trend visualization with customizable curves, markers, and animations for time-series data

Bar Chart

Categorical data comparison with horizontal/vertical orientation and stacked options

Area Chart

Filled area visualization combining line charts with gradient fills for cumulative data

Donut Chart

Proportional data display with customizable center space and interactive legends

Radar Chart

Multi-dimensional analysis with circular grid for comparing multiple metrics

Radial Bar Chart

Progress visualization with circular progress bars for KPIs and percentages

Architecture Overview

BaseChart Foundation

All chart components extend from BaseChart which provides:

Theme integration with CSS custom properties
Responsive behavior and automatic resizing
Custom tooltip rendering with consistent styling
Animation configurations for smooth interactions
Default color palette matching your design system

// BaseChart provides the foundation for all chart types
import BaseChart, { type BaseChartProps } from './BaseChart'

// All chart components inherit these features:
interface BaseChartProps {
className?: string
options?: ApexOptions
series?: ApexAxisChartSeries | number[]
type: 'line' | 'bar' | 'pie' | 'area' | 'radar' | 'donut' | 'radialBar'
height?: string | number
width?: string | number
}

// Theme-aware color system
const colors = [
'var(--primary)',
'var(--color-chart-1)',
'var(--color-chart-2)',
'var(--color-chart-3)',
'var(--color-chart-4)',
'var(--color-chart-5)',
]

LineChart Component

Features

Smooth curves with configurable curve types
Interactive markers on data points
Cross-hair indicators for precise value reading
Multi-series support with legend controls
Responsive grid system with customizable styling

import React from 'react'
import { LineChart } from '@/components/Charts'

// Basic line chart with trend data
const RevenueChart = () => {
const revenueData = [
  {
    name: 'Revenue',
    data: [31, 40, 28, 51, 42, 109, 100, 91, 85, 78, 95, 110],
  },
  {
    name: 'Profit',
    data: [11, 32, 45, 32, 34, 52, 41, 65, 55, 48, 62, 75],
  },
]

const months = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]

return (
  <div className="p-4">
    <h3 className="text-lg font-semibold mb-4">Monthly Revenue Trends</h3>
    <LineChart
      data={revenueData}
      categories={months}
      height={350}
      smooth={true}
      strokeWidth={3}
      showGrid={true}
      markers={{ size: 4, hover: { size: 6 } }}
      className="w-full"
    />
  </div>
)
}

export default RevenueChart

Advanced Configuration

// Advanced LineChart with custom styling
<LineChart
data={[
  { name: 'Sales', data: [30, 40, 45, 50, 49, 60, 70, 91] },
  { name: 'Leads', data: [20, 30, 35, 40, 39, 50, 60, 81] }
]}
categories={['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8']}
height={400}
smooth={false}  // Straight lines instead of curves
strokeWidth={2}
showDataLabels={true}
showGrid={false}
markers={{
  size: 6,
  hover: { size: 8 }
}}
options={{
  colors: ['#3b82f6', '#ef4444'],
  stroke: {
    dashArray: [0, 5] // Solid and dashed lines
  },
  yaxis: {
    min: 0,
    max: 100,
    tickAmount: 5
  }
}}
/>

BarChart Component

Features

Horizontal/Vertical orientation support
Stacked bar charts for comparative data
Custom border radius and styling
Grouped data visualization with multiple series
Data labels with smart positioning

import React from 'react'
import { BarChart } from '@/components/Charts'

// Product performance comparison
const ProductPerformance = () => {
const salesData = [
  {
    name: 'Product A',
    data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 72, 68, 75],
  },
  {
    name: 'Product B',
    data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 86, 115, 120],
  },
]

const quarters = [
  'Q1-Jan', 'Q1-Feb', 'Q1-Mar', 'Q2-Apr', 'Q2-May', 'Q2-Jun',
  'Q3-Jul', 'Q3-Aug', 'Q3-Sep', 'Q4-Oct', 'Q4-Nov', 'Q4-Dec'
]

return (
  <div className="space-y-6">
    {/* Vertical Bar Chart */}
    <div>
      <h4 className="text-md font-medium mb-3">Quarterly Sales Performance</h4>
      <BarChart
        data={salesData}
        categories={quarters}
        height={300}
        horizontal={false}
        stacked={false}
        columnWidth="60%"
        borderRadius={4}
        showDataLabels={false}
      />
    </div>

    {/* Horizontal Bar Chart */}
    <div>
      <h4 className="text-md font-medium mb-3">Product Comparison</h4>
      <BarChart
        data={salesData}
        categories={quarters}
        height={400}
        horizontal={true}
        stacked={false}
        barHeight="70%"
        borderRadius={6}
        showDataLabels={true}
      />
    </div>
  </div>
)
}

export default ProductPerformance

Stacked Bar Chart

// Stacked bar chart for cumulative data
<BarChart
data={[
  { name: 'Desktop', data: [44, 55, 41, 67, 22, 43] },
  { name: 'Mobile', data: [13, 23, 20, 8, 13, 27] },
  { name: 'Tablet', data: [11, 17, 15, 15, 21, 14] }
]}
categories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
stacked={true}
height={350}
options={{
  chart: {
    stackType: '100%' // Show as percentages
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '55%',
    }
  }
}}
/>

DonutChart Component

Features

Customizable center space for labels or totals
Interactive legend with data point toggling
Gradient fills and custom colors
Data labels with percentage formatting
Responsive sizing for different containers

import React from 'react'
import { DonutChart } from '@/components/Charts'

// Team performance breakdown
const TeamPerformance = () => {
const teamData = [44, 55, 13, 43, 22]
const teamLabels = ['Development', 'Design', 'Marketing', 'Sales', 'Support']

return (
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    {/* Basic Donut Chart */}
    <div className="space-y-3">
      <h4 className="text-lg font-semibold">Team Distribution</h4>
      <DonutChart
        data={teamData}
        labels={teamLabels}
        height={300}
      />
    </div>

    {/* Advanced Donut with Custom Center */}
    <div className="space-y-3">
      <h4 className="text-lg font-semibold">Revenue by Category</h4>
      <DonutChart
        data={[35, 25, 20, 15, 5]}
        labels={['Software', 'Hardware', 'Services', 'Training', 'Other']}
        height={300}
        options={{
          plotOptions: {
            pie: {
              donut: {
                size: '65%',
                labels: {
                  show: true,
                  name: {
                    show: true,
                    fontSize: '16px',
                    fontWeight: 600,
                  },
                  value: {
                    show: true,
                    fontSize: '14px',
                    formatter: (val) => `${val}%`
                  },
                  total: {
                    show: true,
                    label: 'Total Revenue',
                    formatter: () => '$1.2M'
                  }
                }
              }
            }
          }
        }}
      />
    </div>
  </div>
)
}

export default TeamPerformance

AreaChart Component

Features

Gradient fills beneath the line
Stacked area charts for cumulative visualization
Opacity controls for overlapping areas
Smooth or stepped fills options

import React from 'react'
import { AreaChart } from '@/components/Charts'

// Website analytics visualization
const WebsiteAnalytics = () => {
const analyticsData = [
  {
    name: 'Page Views',
    data: [31, 40, 28, 51, 42, 109, 100, 91, 85, 78, 95, 110],
  },
  {
    name: 'Unique Visitors',
    data: [11, 32, 45, 32, 34, 52, 41, 65, 55, 48, 62, 75],
  },
]

return (
  <div className="p-4">
    <h3 className="text-lg font-semibold mb-4">Website Analytics</h3>
    <AreaChart
      data={analyticsData}
      categories={[
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]}
      height={350}
      stacked={false}
      fillOpacity={0.3}
      options={{
        fill: {
          gradient: {
            shade: 'light',
            type: 'vertical',
            shadeIntensity: 0.5,
            opacityFrom: 0.7,
            opacityTo: 0.1,
          }
        },
        stroke: {
          curve: 'smooth',
          width: 2
        }
      }}
    />
  </div>
)
}

export default WebsiteAnalytics

RadarChart Component

Features

Multi-metric comparison in circular format
Customizable grid lines and scales
Multiple series support for comparisons
Interactive data points with hover effects

import React from 'react'
import { RadarChart } from '@/components/Charts'

// Skill assessment radar
const SkillAssessment = () => {
const skillsData = [
  {
    name: 'Frontend Developer',
    data: [80, 90, 70, 80, 60, 85]
  },
  {
    name: 'Backend Developer',
    data: [60, 70, 95, 90, 85, 70]
  }
]

const skillCategories = [
  'HTML/CSS',
  'JavaScript',
  'Database',
  'API Design',
  'DevOps',
  'Testing'
]

return (
  <div className="p-4">
    <h3 className="text-lg font-semibold mb-4">Developer Skills Comparison</h3>
    <RadarChart
      data={skillsData}
      categories={skillCategories}
      height={400}
      options={{
        yaxis: {
          min: 0,
          max: 100,
          tickAmount: 5
        },
        plotOptions: {
          radar: {
            polygons: {
              strokeColor: 'var(--color-border)',
              fill: {
                colors: ['transparent']
              }
            }
          }
        }
      }}
    />
  </div>
)
}

export default SkillAssessment

RadialBarChart Component

Features

Progress visualization in circular format
Multiple progress bars for KPI tracking
Custom center labels with values
Gradient fills and animations

import React from 'react'
import { RadialBarChart } from '@/components/Charts'

// KPI dashboard
const KPIDashboard = () => {
return (
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    {/* Single KPI */}
    <div className="text-center">
      <h4 className="text-sm font-medium mb-3">Sales Target</h4>
      <RadialBarChart
        series={[85]}
        height={200}
        options={{
          plotOptions: {
            radialBar: {
              startAngle: -90,
              endAngle: 90,
              dataLabels: {
                name: {
                  show: false
                },
                value: {
                  fontSize: '24px',
                  fontWeight: 600,
                  formatter: (val) => `${val}%`
                }
              }
            }
          },
          labels: ['Progress']
        }}
      />
      <p className="text-sm text-muted-foreground">$850K of $1M</p>
    </div>

    {/* Multiple KPIs */}
    <div className="col-span-2">
      <h4 className="text-lg font-semibold mb-4">Performance Metrics</h4>
      <RadialBarChart
        series={[75, 65, 85, 90]}
        height={300}
        options={{
          plotOptions: {
            radialBar: {
              dataLabels: {
                name: {
                  fontSize: '12px',
                  fontWeight: 400
                },
                value: {
                  fontSize: '16px',
                  fontWeight: 600,
                  formatter: (val) => `${val}%`
                },
                total: {
                  show: true,
                  label: 'Overall',
                  formatter: () => '79%'
                }
              }
            }
          },
          labels: ['Customer Satisfaction', 'Quality Score', 'Delivery Time', 'Team Performance']
        }}
      />
    </div>
  </div>
)
}

export default KPIDashboard

Theme Integration

CSS Custom Properties

All charts use CSS custom properties for consistent theming:

/* Chart color system */
:root {
--primary: #3b82f6;
--color-chart-1: #ef4444;
--color-chart-2: #10b981;
--color-chart-3: #f59e0b;
--color-chart-4: #8b5cf6;
--color-chart-5: #06b6d4;

/* Chart styling */
--color-sidebar-border: rgba(0, 0, 0, 0.1);
--color-content: rgba(0, 0, 0, 0.7);
--color-foreground: rgba(0, 0, 0, 0.9);
--color-background: #ffffff;
--color-border: rgba(0, 0, 0, 0.1);
}

/* Dark theme support */
[data-theme="dark"] {
--primary: #60a5fa;
--color-sidebar-border: rgba(255, 255, 255, 0.1);
--color-content: rgba(255, 255, 255, 0.7);
--color-foreground: rgba(255, 255, 255, 0.9);
--color-background: #0f172a;
--color-border: rgba(255, 255, 255, 0.1);
}

Performance Optimization

Memoization and Lazy Loading

import React, { memo, useMemo, lazy, Suspense } from 'react'
import { LineChart } from '@/components/Charts'

// Lazy load chart components
const LazyBarChart = lazy(() => import('@/components/Charts/BarChart'))
const LazyDonutChart = lazy(() => import('@/components/Charts/DonutChart'))

// Memoized chart component
const MemoizedLineChart = memo<LineChartProps>(({ data, categories, ...props }) => {
// Memoize processed data
const processedData = useMemo(() => {
  return data?.map(series => ({
    ...series,
    data: series.data.map(val => Math.round(val * 100) / 100)
  }))
}, [data])

return (
  <LineChart
    data={processedData}
    categories={categories}
    {...props}
  />
)
})

// Dashboard with lazy loading
const Dashboard = () => {
return (
  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {/* Immediate load */}
    <MemoizedLineChart data={lineData} categories={months} />

    {/* Lazy load with suspense */}
    <Suspense fallback={<div className="h-[350px] animate-pulse bg-muted rounded" />}>
      <LazyBarChart data={barData} categories={quarters} />
    </Suspense>

    <Suspense fallback={<div className="h-[300px] animate-pulse bg-muted rounded" />}>
      <LazyDonutChart data={donutData} labels={pieLabels} />
    </Suspense>
  </div>
)
}

API Reference

Common Props

All chart components share these base props:

Prop	Type	Description
`data`	`ApexAxisChartSeries \| number[]`	Chart data series
`categories`	`string[]`	X-axis categories/labels
`height`	`string \| number`	Chart height
`width`	`string \| number`	Chart width
`className`	`string`	Additional CSS classes
`options`	`ApexOptions`	Custom ApexCharts options

Chart-Specific Props

LineChart

Prop	Type	Default	Description
`smooth`	`boolean`	`true`	Enable smooth curves
`strokeWidth`	`number`	`3`	Line stroke width
`showDataLabels`	`boolean`	`false`	Show data point labels
`showGrid`	`boolean`	`true`	Show grid lines
`markers`	`object`	`{ size: 4 }`	Marker configuration

BarChart

Prop	Type	Default	Description
`horizontal`	`boolean`	`false`	Horizontal bar orientation
`stacked`	`boolean`	`false`	Enable stacked bars
`borderRadius`	`number`	`4`	Bar border radius
`columnWidth`	`string`	`"60%"`	Column width percentage
`barHeight`	`string`	`"70%"`	Bar height percentage

The Charts library provides enterprise-grade data visualization with excellent performance and customization options! 📊✨