Box Plot

Display statistical distribution with quartiles and outliers

Intermediate

Perfect For

Performance comparison across teams
Quality control measurements
A/B testing result comparison

Chart Details

Category: Distribution

Complexity: Intermediate

Best Practice: Use clear labels and appropriate colors

Interactive Chart Preview

Note: Chart.js doesn't have native box plot support. This is a simulation using stacked bar charts to approximate box plot quartiles and outliers.

Chart.js Implementation

Interactive JavaScript charting library with great performance

Live Preview

Implementation Code

Chart.js Code ExampleSynced

Chart.js

Auto-sync

// Note: Chart.js doesn't have native box plot support
// This simulation uses stacked bars to create box plot appearance
const config = {
  type: 'bar',
  data: {
    labels: ['Product A', 'Product B', 'Product C', 'Product D'],
    datasets: [
      {
        label: 'Min to Q1',
        data: [15, 20, 10, 23], // Q1 values (bottom of box)
        backgroundColor: 'rgba(156, 163, 175, 0.3)',
        borderColor: 'rgb(75, 85, 99)',
        borderWidth: 1,
        barThickness: 30
      },
      {
        label: 'Q1 to Q3 (IQR Box)',
        data: [10, 10, 10, 12], // Q3-Q1 difference (height of box)
        backgroundColor: 'rgba(59, 130, 246, 0.7)',
        borderColor: 'rgb(59, 130, 246)',
        borderWidth: 2,
        barThickness: 30
      },
      {
        label: 'Q3 to Max',
        data: [10, 10, 8, 10], // Max-Q3 difference (top whisker)
        backgroundColor: 'rgba(156, 163, 175, 0.3)',
        borderColor: 'rgb(75, 85, 99)',
        borderWidth: 1,
        barThickness: 30
      },
      {
        label: 'Median Line',
        data: [20, 25, 15, 28], // Median values
        type: 'line',
        backgroundColor: 'rgb(239, 68, 68)',
        borderColor: 'rgb(239, 68, 68)',
        borderWidth: 4,
        pointRadius: 0,
        fill: false,
        tension: 0
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Product Performance Box Plot Simulation'
      },
      legend: {
        display: true
      },
      tooltip: {
        mode: 'index',
        intersect: false,
        callbacks: {
          title: function(context) {
            return context[0].label + ' - Statistical Summary';
          },
          label: function(context) {
            const datasetLabel = context.dataset.label;
            const value = context.parsed.y;
            if (datasetLabel.includes('Q3')) {
              return `Q3 (75th percentile): ${value}`;
            } else if (datasetLabel.includes('Q1')) {
              return `Q1 (25th percentile): ${value}`;
            } else if (datasetLabel.includes('Median')) {
              return `Median (Q2): ${value}`;
            }
            return `${datasetLabel}: ${value}`;
          }
        }
      }
    },
    scales: {
      x: {
        display: true,
        title: {
          display: true,
          text: 'Products'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Performance Score'
        },
        beginAtZero: true
      }
    }
  }
};

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