React Box Plot Chart

A powerful, customizable box plot chart component for React applications with TypeScript support. Perfect for visualizing statistical distributions, quartiles, outliers, and data spread across categories.

Installation

npm install @aniruddha1806/boxplot-chart

Features

• 📊 Interactive box plot charts with statistical calculations
• 📈 Automatic quartile, median, and outlier detection
• 🎨 Customizable colors and styling for all chart elements
• 📱 Responsive design with automatic scaling
• 🖱️ Interactive tooltips with detailed statistics
• 🎯 Outlier visualization with toggle option
• 📏 Customizable axis labels and titles
• 🎨 CSS class support for advanced styling
• 📝 TypeScript support with full type definitions
• ♿ Accessibility features
• 🪶 Zero dependencies for chart rendering

Quick Start

Basic Box Plot

import BoxPlot from '@aniruddha1806/boxplot-chart';

function App() {
  const data = {
    'Group A': [12, 15, 18, 20, 22, 25, 28, 30, 35, 40],
    'Group B': [8, 12, 16, 18, 20, 24, 26, 28, 32, 38],
    'Group C': [10, 14, 17, 19, 21, 23, 27, 29, 33, 36]
  };

  return (
    <BoxPlot
      data={data}
      title="Sample Box Plot"
      xAxisLabel="Groups"
      yAxisLabel="Values"
      width="100%"
      height={400}
    />
  );
}

Props

Core Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | Dataset \| string | {} | Chart data as object or CSV string | | width | number \| string | "100%" | Chart width | | height | number \| string | 400 | Chart height | | title | string | "Box Plot" | Chart title | | xAxisLabel | string | "" | X-axis label | | yAxisLabel | string | "" | Y-axis label |

Styling Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | "" | CSS class for container | | boxClassName | string | "" | CSS class for box elements | | medianClassName | string | "" | CSS class for median lines | | whiskerClassName | string | "" | CSS class for whiskers | | outlierClassName | string | "" | CSS class for outliers |

Color Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | colors.box | string | "#3b82f6" | Box fill color | | colors.median | string | "#1e40af" | Median line color | | colors.whisker | string | "#93c5fd" | Whisker color | | colors.outlier | string | "#ef4444" | Outlier point color |

Feature Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | showOutliers | boolean | true | Display outlier points | | showTooltip | boolean | true | Enable interactive tooltips |

Data Types

type DataPoint = number;
type Category = string;
type Dataset = Record<Category, DataPoint[]>;

interface BoxPlotStats {
  min: number;
  q1: number;
  median: number;
  q3: number;
  max: number;
  outliers: number[];
}

Examples

Basic Statistical Analysis

Simple box plot for comparing distributions:

import BoxPlot from '@aniruddha1806/boxplot-chart';

function StatisticalAnalysisExample() {
  const testScores = {
    'Math': [78, 82, 85, 88, 90, 92, 95, 98, 100, 85, 87, 89],
    'Science': [75, 80, 83, 86, 88, 91, 94, 96, 99, 82, 84, 87],
    'English': [80, 83, 86, 89, 91, 93, 96, 98, 100, 88, 90, 92],
    'History': [72, 76, 79, 82, 85, 88, 91, 94, 97, 80, 83, 86]
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Student Test Scores by Subject</h2>
      <BoxPlot
        data={testScores}
        title="Test Score Distribution"
        xAxisLabel="Subjects"
        yAxisLabel="Score"
        width="100%"
        height={500}
        colors={{
          box: '#10b981',
          median: '#059669',
          whisker: '#6ee7b7',
          outlier: '#f59e0b'
        }}
      />
    </div>
  );
}

Custom Styled Box Plot

Apply custom styling with CSS classes:

import BoxPlot from '@aniruddha1806/boxplot-chart';
import './custom-boxplot.css'; // Your custom CSS

function CustomStyledExample() {
  const performanceData = {
    'Q1': [85, 88, 92, 95, 98, 90, 87, 93, 96, 89],
    'Q2': [88, 91, 95, 98, 101, 93, 90, 96, 99, 92],
    'Q3': [90, 93, 97, 100, 103, 95, 92, 98, 101, 94],
    'Q4': [92, 95, 99, 102, 105, 97, 94, 100, 103, 96]
  };

  return (
    <BoxPlot
      data={performanceData}
      title="Quarterly Performance Metrics"
      xAxisLabel="Quarters"
      yAxisLabel="Performance Score"
      className="custom-boxplot"
      boxClassName="custom-box"
      medianClassName="custom-median"
      whiskerClassName="custom-whisker"
      outlierClassName="custom-outlier"
      width="100%"
      height={450}
    />
  );
}

CSS file (custom-boxplot.css):

.custom-boxplot {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.custom-boxplot .chart-title {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.custom-boxplot .axis-label {
  fill: white;
  font-weight: bold;
}

.custom-boxplot .tick text {
  fill: white;
}

.custom-box {
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.custom-median {
  stroke-width: 3;
}

.custom-whisker {
  stroke-width: 2;
  stroke-dasharray: 5,5;
}

.custom-outlier {
  stroke: white;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.custom-outlier:hover {
  r: 6;
  transition: r 0.2s ease;
}

TypeScript Usage

The component provides full TypeScript support:

import BoxPlot, { BoxPlotProps, BoxPlotStats, Dataset } from '@aniruddha1806/boxplot-chart';
import { useState, useEffect } from 'react';

interface AnalyticsData {
  categories: string[];
  values: number[][];
}

interface ChartConfig {
  title: string;
  colors: {
    box: string;
    median: string;
    whisker: string;
    outlier: string;
  };
}

const AnalyticsChart: React.FC = () => {
  const [data, setData] = useState<Dataset>({});
  const [stats, setStats] = useState<Record<string, BoxPlotStats>>({});

  const calculateStats = (dataset: Dataset): Record<string, BoxPlotStats> => {
    const result: Record<string, BoxPlotStats> = {};
    
    Object.entries(dataset).forEach(([category, values]) => {
      const sorted = [...values].sort((a, b) => a - b);
      const q1 = sorted[Math.floor(sorted.length * 0.25)];
      const median = sorted[Math.floor(sorted.length * 0.5)];
      const q3 = sorted[Math.floor(sorted.length * 0.75)];
      const iqr = q3 - q1;
      
      const outliers = sorted.filter(v => 
        v < q1 - 1.5 * iqr || v > q3 + 1.5 * iqr
      );
      
      result[category] = {
        min: Math.min(...sorted),
        q1,
        median,
        q3,
        max: Math.max(...sorted),
        outliers
      };
    });
    
    return result;
  };

  useEffect(() => {
    // Fetch or generate data
    const sampleData: Dataset = {
      'Category A': [10, 15, 20, 25, 30],
      'Category B': [12, 18, 22, 28, 32],
      'Category C': [8, 14, 19, 24, 29]
    };
    
    setData(sampleData);
    setStats(calculateStats(sampleData));
  }, []);

  const chartConfig: ChartConfig = {
    title: 'Statistical Analysis',
    colors: {
      box: '#3b82f6',
      median: '#1e40af',
      whisker: '#93c5fd',
      outlier: '#ef4444'
    }
  };

  const boxPlotProps: BoxPlotProps = {
    data,
    title: chartConfig.title,
    colors: chartConfig.colors,
    width: '100%',
    height: 400,
    showTooltip: true,
    showOutliers: true,
    xAxisLabel: 'Categories',
    yAxisLabel: 'Values'
  };

  return (
    <div>
      <BoxPlot {...boxPlotProps} />
      <div>
        <h3>Statistics Summary:</h3>
        {Object.entries(stats).map(([category, stat]) => (
          <div key={category}>
            <h4>{category}</h4>
            <p>Median: {stat.median}, IQR: {stat.q3 - stat.q1}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

Statistical Calculations

The component automatically calculates:

Quartiles

• Q1 (25th percentile): First quartile
• Q2 (50th percentile): Median
• Q3 (75th percentile): Third quartile

Outlier Detection

• Lower bound: Q1 - 1.5 × IQR
• Upper bound: Q3 + 1.5 × IQR
• Outliers: Values outside these bounds

Whiskers

• Lower whisker: Minimum non-outlier value
• Upper whisker: Maximum non-outlier value