Charts Library

A comprehensive collection of chart components built with Vue 3, TypeScript, and ApexCharts. Create beautiful, interactive data visualizations with seamless theme integration and responsive design.

👀 Live Demo

✨ Key Features

📊 6 Chart Types

Area, Bar, Line, Donut, Radar, and RadialBar charts with specialized configurations

🎨 Theme Integration

Automatic dark/light mode support with CSS custom properties and color variables

📱 Responsive Design

Mobile-first approach with adaptive layouts and touch-friendly interactions

⚡ Performance

Optimized rendering with Vue 3 reactivity and ApexCharts efficient updates

🔧 Customizable

Extensive configuration options with sensible defaults and TypeScript support

💡 Interactive

Built-in tooltips, legends, animations, and user interaction features

📊 Chart Types Overview

Area Charts

Perfect for showing trends over time with filled areas. Ideal for revenue tracking, website analytics, and performance metrics.

Use Cases:

Revenue trends
Website traffic
Performance metrics
Growth analysis

Bar Charts

Excellent for comparing values across categories. Great for sales data, survey results, and comparative analysis.

Use Cases:

Sales comparison
Survey results
Category analysis
Performance ranking

Line Charts

Classic choice for time series data and trend analysis. Perfect for stock prices, temperature, and KPI tracking.

Use Cases:

Stock prices
Temperature data
KPI tracking
Trend analysis

Donut Charts

Modern alternative to pie charts with better readability. Ideal for market share, budget allocation, and composition data.

Use Cases:

Market share
Budget breakdown
User demographics
Resource allocation

Radar Charts

Multi-dimensional data visualization perfect for skill assessments, product comparisons, and performance evaluation.

Use Cases:

Skill assessment
Product comparison
Performance evaluation
Multi-criteria analysis

RadialBar Charts

Circular progress indicators perfect for completion rates, progress tracking, and goal visualization.

Use Cases:

Progress tracking
Goal completion
Performance scores
Circular metrics

🚀 Basic Usage

<template>
  <AreaCharts
    :series="areaSeries"
    :options="areaOptions"
    class="h-64"
  />
</template>

<script setup lang="ts">
import { AreaCharts } from '@/components/Charts'
import type { ApexOptions } from 'apexcharts'

const areaSeries = [
  {
    name: 'Revenue',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }
]

const areaOptions: ApexOptions = {
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  },
  yaxis: {
    title: {
      text: 'Revenue ($k)'
    }
  }
}
</script>

<template>
  <BarCharts
    :series="barSeries"
    :options="barOptions"
    class="h-64"
  />
</template>

<script setup lang="ts">
import { BarCharts } from '@/components/Charts'

const barSeries = [
  {
    name: 'Sales',
    data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
  }
]

const barOptions: ApexOptions = {
  xaxis: {
    categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9']
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '55%'
    }
  }
}
</script>

<template>
  <DonutCharts
    :series="donutSeries"
    :options="donutOptions"
    class="h-64"
  />
</template>

<script setup lang="ts">
import { DonutCharts } from '@/components/Charts'

const donutSeries = [44, 55, 13, 43, 22]

const donutOptions: ApexOptions = {
  labels: ['Apple', 'Mango', 'Orange', 'Watermelon', 'Grape'],
  legend: {
    position: 'bottom'
  }
}
</script>

🎨 Theme Integration & Styling

Automatic Theme Support

All chart components automatically adapt to your application’s theme:

<script setup lang="ts">
// Charts automatically use CSS custom properties
const themeAwareOptions: ApexOptions = {
  colors: [
    'var(--primary)',        // Primary theme color
    'var(--color-chart-1)',  // Chart color 1
    'var(--color-chart-2)',  // Chart color 2
    'var(--color-chart-3)',  // Chart color 3
    'var(--color-chart-4)',  // Chart color 4
    'var(--color-chart-5)',  // Chart color 5
  ],
  theme: {
    mode: 'light', // Automatically switches with app theme
  }
}
</script>

<script setup lang="ts">
const businessColors = {
  colors: [
    '#1f77b4', // Professional blue
    '#ff7f0e', // Business orange
    '#2ca02c', // Success green
    '#d62728', // Alert red
    '#9467bd', // Corporate purple
  ]
}
</script>

<script setup lang="ts">
const analyticsColors = {
  colors: [
    '#3b82f6', // Primary blue
    '#10b981', // Emerald green
    '#f59e0b', // Amber yellow
    '#ef4444', // Red
    '#8b5cf6', // Violet
  ]
}
</script>

⚙️ Advanced Configuration

Responsive Breakpoints

<template>
  <AreaCharts
    :series="series"
    :options="responsiveOptions"
    class="h-64"
  />
</template>

<script setup lang="ts">
const responsiveOptions: ApexOptions = {
  responsive: [
    {
      breakpoint: 768,
      options: {
        legend: {
          position: 'bottom'
        },
        chart: {
          height: 200
        }
      }
    },
    {
      breakpoint: 480,
      options: {
        legend: {
          show: false
        },
        chart: {
          height: 180
        }
      }
    }
  ]
}
</script>

Animation Configuration

<script setup lang="ts">
const animationOptions: ApexOptions = {
  chart: {
    animations: {
      enabled: true,
      easing: 'easeinout',
      speed: 800,
      animateGradually: {
        enabled: true,
        delay: 150
      },
      dynamicAnimation: {
        enabled: true,
        speed: 350
      }
    }
  }
}
</script>

Custom Tooltips

<script setup lang="ts">
const tooltipOptions: ApexOptions = {
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      return `
        <div class="custom-tooltip">
          <div class="tooltip-title">${w.config.labels[dataPointIndex]}</div>
          <div class="tooltip-value">${series[seriesIndex][dataPointIndex]}</div>
        </div>
      `
    }
  }
}
</script>

<style>
.custom-tooltip {
  @apply p-3 bg-card border rounded-lg shadow-lg;
}

.tooltip-title {
  @apply text-sm font-medium text-muted-foreground;
}

.tooltip-value {
  @apply text-lg font-bold text-foreground;
}
</style>

📈 Real-World Examples

Dashboard Analytics

Revenue Tracking
Performance Metrics

<template>
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Monthly Revenue -->
    <BaseCard>
      <BaseCardHeader>
        <h3 class="text-lg font-semibold">Monthly Revenue</h3>
        <p class="text-sm text-muted-foreground">Revenue trends over the last 12 months</p>
      </BaseCardHeader>
      <BaseCardContent>
        <AreaCharts
          :series="revenueSeries"
          :options="revenueOptions"
          class="h-64"
        />
      </BaseCardContent>
    </BaseCard>

    <!-- Category Breakdown -->
    <BaseCard>
      <BaseCardHeader>
        <h3 class="text-lg font-semibold">Revenue by Category</h3>
        <p class="text-sm text-muted-foreground">Distribution across product categories</p>
      </BaseCardHeader>
      <BaseCardContent>
        <DonutCharts
          :series="categorySeries"
          :options="categoryOptions"
          class="h-64"
        />
      </BaseCardContent>
    </BaseCard>
  </div>
</template>

<script setup lang="ts">
import { AreaCharts, DonutCharts } from '@/components/Charts'
import { BaseCard, BaseCardHeader, BaseCardContent } from '@/components/BaseCard'

const revenueSeries = [
  {
    name: 'Revenue',
    data: [12000, 15000, 14000, 18000, 22000, 25000, 28000, 24000, 26000, 30000, 32000, 35000]
  }
]

const revenueOptions: ApexOptions = {
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yaxis: {
    title: {
      text: 'Revenue ($)'
    },
    labels: {
      formatter: (value) => `$${(value / 1000).toFixed(0)}k`
    }
  }
}

const categorySeries = [35000, 28000, 22000, 15000]
const categoryOptions: ApexOptions = {
  labels: ['Electronics', 'Clothing', 'Books', 'Home & Garden']
}
</script>

<template>
  <div class="space-y-6">
    <!-- KPI Overview -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <BaseCard>
        <BaseCardContent class="p-4">
          <RadialBarCharts
            :series="[85]"
            :options="completionOptions"
            class="h-32"
          />
          <div class="text-center mt-2">
            <p class="text-sm text-muted-foreground">Goal Completion</p>
          </div>
        </BaseCardContent>
      </BaseCard>

      <BaseCard>
        <BaseCardContent class="p-4">
          <RadialBarCharts
            :series="[72]"
            :options="satisfactionOptions"
            class="h-32"
          />
          <div class="text-center mt-2">
            <p class="text-sm text-muted-foreground">Customer Satisfaction</p>
          </div>
        </BaseCardContent>
      </BaseCard>

      <BaseCard>
        <BaseCardContent class="p-4">
          <RadialBarCharts
            :series="[94]"
            :options="qualityOptions"
            class="h-32"
          />
          <div class="text-center mt-2">
            <p class="text-sm text-muted-foreground">Quality Score</p>
          </div>
        </BaseCardContent>
      </BaseCard>
    </div>

    <!-- Performance Radar -->
    <BaseCard>
      <BaseCardHeader>
        <h3 class="text-lg font-semibold">Team Performance</h3>
        <p class="text-sm text-muted-foreground">Multi-dimensional performance analysis</p>
      </BaseCardHeader>
      <BaseCardContent>
        <RadarCharts
          :series="performanceSeries"
          :options="performanceOptions"
          class="h-80"
        />
      </BaseCardContent>
    </BaseCard>
  </div>
</template>

📚 API Reference

BaseCharts Props

Prop	Type	Default	Description
`type`	`’line’ \| ‘bar’ \| ‘pie’ \| ‘area’ \| ‘radar’ \| ‘donut’ \| ‘radialBar’`	-	Chart type to render
`series`	`ApexAxisChartSeries \| number[]`	-	Chart data series
`options`	`ApexOptions`		ApexCharts configuration options
`class`	`string`	-	Additional CSS classes

Chart-Specific Components

Component	Series Type	Common Use Cases
`AreaCharts`	`ApexAxisChartSeries`	Trends, cumulative data, filled line charts
`BarCharts`	`ApexAxisChartSeries`	Comparisons, rankings, categorical data
`LineCharts`	`ApexAxisChartSeries`	Time series, trends, continuous data
`DonutCharts`	`number[]`	Composition, percentages, parts of whole
`RadarCharts`	`ApexAxisChartSeries`	Multi-dimensional data, comparisons
`RadialBarCharts`	`number[]`	Progress, completion rates, scores

🚀 Performance Tips

Memory Management

<script setup lang="ts">
import { onUnmounted, shallowRef } from 'vue'

// Use shallowRef for large datasets
const chartData = shallowRef([
  // Large dataset
])

// Cleanup on unmount
onUnmounted(() => {
  // ApexCharts automatically handles cleanup
  // but you can manually destroy if needed
})
</script>

Large Dataset Handling

<script setup lang="ts">
const largeDatasetOptions: ApexOptions = {
  chart: {
    animations: {
      enabled: false // Disable for better performance
    }
  },
  stroke: {
    width: 1 // Thinner lines for large datasets
  },
  markers: {
    size: 0 // Hide markers for performance
  }
}
</script>

🎯 Best Practices

Design Guidelines

Color Consistency: Use your application’s color palette for brand consistency
Accessibility: Ensure sufficient color contrast and provide alternative text
Mobile First: Design charts that work well on mobile devices
Data Clarity: Choose the right chart type for your data story
Progressive Enhancement: Start with basic charts and add complexity as needed

Development Tips

<script setup lang="ts">
// ✅ Good: Use computed properties for reactive options
const chartOptions = computed(() => ({
  colors: [theme.primary, theme.secondary],
  // ... other options
}))

// ✅ Good: Memoize expensive calculations
const processedData = computed(() => {
  return rawData.value.map(item => ({
    x: item.date,
    y: item.value
  }))
})

// ❌ Avoid: Recreating options on every render
// const options = { ... } // This will cause unnecessary re-renders
</script>

Previous: HiForm Builder

Next: Dashboard Features