Donut Chart

Modern alternative to pie charts with better readability

Beginner

Perfect For

  • Budget allocation visualization
  • Market share analysis
  • Survey response breakdowns

Chart Details

Category: Composition

Complexity: Beginner

Best Practice: Use clear labels and appropriate colors

Interactive Chart Preview

Chart.js Implementation

Interactive JavaScript charting library with great performance

Live Preview

Implementation Code

Chart.js Code ExampleSynced

Chart.js
Auto-sync
const config = {
  type: 'doughnut',
  data: {
    labels: ['Desktop', 'Mobile', 'Tablet', 'Smart TV', 'Other'],
    datasets: [{
      label: 'Traffic Source',
      data: [45, 35, 12, 5, 3],
      backgroundColor: [
        '#3b82f6',
        '#10b981',
        '#f59e0b',
        '#ef4444',
        '#8b5cf6'
      ],
      borderColor: [
        '#2563eb',
        '#059669',
        '#d97706',
        '#dc2626',
        '#7c3aed'
      ],
      borderWidth: 2,
      hoverOffset: 4
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Website Traffic by Device Type'
      },
      legend: {
        position: 'bottom',
        labels: {
          padding: 20,
          usePointStyle: true
        }
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.label + ': ' + context.parsed + '%';
          }
        }
      }
    },
    cutout: '60%'
  }
};

The code example is automatically synced with the selected visualization library above. You can still manually select different code examples using the buttons.

Tips & Best Practices

Design Guidelines

  • Use consistent color schemes across your dashboard
  • Ensure sufficient contrast for accessibility
  • Keep labels clear and concise

Performance Tips

  • Limit data points for better performance
  • Use animation sparingly for large datasets
  • Consider data aggregation for time series