Skip to main content

Overview

Boodoo Charts deliver zero-dependency, ultra-lightweight data visualizations inspired by Chart.js. Render bar charts, continuous line and area charts, full-size pie and donut analytics, polar area slices, and multi-axis radar charts that seamlessly bind to Boodoo theme tokens and dark mode.

Interactive Bar Chart

Bar charts display categorized numeric metrics with automated scaling, gridlines, and interactive hover tooltips.

Monthly Framework Downloads
2026 Metrics 
const chart = new boodoo.Chart('#myBarChart', {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Downloads',
      data: [12400, 19800, 24500, 31200, 42100, 58400]
    }]
  }
});

Continuous Line & Area Charts

Visualize continuous telemetry, chronological latency curves, and filled volumetric distributions.

API Response Latency (Line)
99.9% Uptime
Server Bandwidth (Area)
Real-time 
// Area Chart with gradient fill
const areaChart = new boodoo.Chart('#demoAreaChart', {
  type: 'area',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      label: 'Bandwidth (GB)',
      data: [140, 210, 180, 290, 340, 420, 380]
    }]
  }
});

Prominent Donut & Pie Charts

Full-sized proportional slices with percentage calculations, hover tooltips, and central metric readouts.

Traffic by Platform (Donut)
Customer Segments (Pie)
const donutChart = new boodoo.Chart('#demoDonutChart', {
  type: 'donut',
  data: {
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [{
      data: [58, 34, 8]
    }]
  },
  options: {
    donutCutout: 0.55
  }
});

Radar & Polar Area Charts

Multi-axis evaluation radar grids and magnitude-scaled radial polar charts for skills assessment, system telemetry, and category benchmarking.

Performance Radar
Resource Distribution (Polar Area)
// Radar Chart
const radarChart = new boodoo.Chart('#demoRadarChart', {
  type: 'radar',
  data: {
    labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'],
    datasets: [
      {
        label: 'Model Alpha',
        data: [85, 90, 75, 95, 80]
      }
    ]
  }
});

// Polar Area Chart
const polarChart = new boodoo.Chart('#demoPolarChart', {
  type: 'polarArea',
  data: {
    labels: ['Compute', 'Storage', 'Network', 'Database', 'Cache'],
    datasets: [{
      data: [45, 78, 62, 90, 35]
    }]
  }
});