Skip to content
Learni
View all tutorials
Gestion de projet

How to Implement an Expert Burndown Chart in 2026

22 minEXPERT
TypeScriptAgileScrum
Lire en français

Introduction

The burndown chart is an essential tool in Agile project management for visualizing sprint progress. Unlike basic versions, an expert burndown handles scope adjustments, real-time metrics, and forecasts. This tutorial guides you through implementing a complete and interactive solution in TypeScript. You will learn to calculate data dynamically, manage unforeseen issues, and integrate advanced visualizations. Ideal for teams seeking maximum precision.

Prerequisites

  • Node.js 20+ and TypeScript 5.4+
  • Advanced knowledge of Scrum and Agile metrics
  • Chart.js 4.x and React 18 (optional for the UI)
  • Access to a REST API for task data

TypeScript Data Model

types/burndown.ts
export interface Task {
  id: string;
  storyPoints: number;
  status: 'todo' | 'inprogress' | 'done';
  completedAt?: Date;
}

export interface Sprint {
  id: string;
  startDate: Date;
  endDate: Date;
  totalPoints: number;
  tasks: Task[];
}

This model defines the structure of tasks and sprints. It enables tracking story points and dates for precise burndown calculations.

Burndown Calculation

utils/burndownCalculator.ts
import { Sprint, Task } from '../types/burndown';

export function calculateBurndown(sprint: Sprint): { day: string; remaining: number }[] {
  const days: { day: string; remaining: number }[] = [];
  const totalDays = Math.ceil((sprint.endDate.getTime() - sprint.startDate.getTime()) / (1000 * 3600 * 24));
  let remaining = sprint.totalPoints;
  for (let i = 0; i <= totalDays; i++) {
    const currentDate = new Date(sprint.startDate);
    currentDate.setDate(currentDate.getDate() + i);
    const completedPoints = sprint.tasks
      .filter(t => t.completedAt && t.completedAt <= currentDate)
      .reduce((sum, t) => sum + t.storyPoints, 0);
    remaining = sprint.totalPoints - completedPoints;
    days.push({ day: currentDate.toISOString().split('T')[0], remaining });
  }
  return days;
}

This function calculates the burndown day by day, accounting for completed tasks. It handles dates precisely to avoid scope errors.

Chart.js Dataset Generation

utils/chartData.ts
import { calculateBurndown } from './burndownCalculator';
import { Sprint } from '../types/burndown';

export function generateChartDataset(sprint: Sprint) {
  const burndownData = calculateBurndown(sprint);
  return {
    labels: burndownData.map(d => d.day),
    datasets: [{
      label: 'Points restants',
      data: burndownData.map(d => d.remaining),
      borderColor: '#3b82f6',
      tension: 0.1
    }]
  };
}

Converts calculations into Chart.js-compatible format. Be sure to include an ideal line to compare actual velocity.

Chart Rendering

components/BurndownChart.tsx
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip } from 'chart.js';
import { generateChartDataset } from '../utils/chartData';
import { Sprint } from '../types/burndown';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip);

export default function BurndownChart({ sprint }: { sprint: Sprint }) {
  const data = generateChartDataset(sprint);
  return <Line data={data} options={{ responsive: true, plugins: { title: { text: 'Burndown Chart' } } }} />;
}

Reusable React component that displays the chart. It is responsive and extensible for adding expert annotations.

API Integration and Real-Time Updates

api/sprint.ts
import { Sprint } from '../types/burndown';

export async function fetchSprintData(sprintId: string): Promise<Sprint> {
  const res = await fetch(`/api/sprints/${sprintId}`);
  return res.json();
}

export async function updateTaskCompletion(taskId: string, completedAt: Date) {
  await fetch(`/api/tasks/${taskId}`, {
    method: 'PATCH',
    body: JSON.stringify({ completedAt })
  });
}

Enables real-time synchronization with an API. Handle network errors and date validation for reliability.

Best Practices

  • Always recalculate the burndown after each task update
  • Use UTC dates to avoid timezone offsets
  • Add an ideal trend line for predictive analysis
  • Validate story points before integration
  • Export data to CSV for audits

Common Mistakes to Avoid

  • Ignoring incomplete tasks in velocity calculations
  • Forgetting to handle mid-sprint scope changes
  • Not refreshing the chart after API modifications
  • Using local data without persistence

Going Further

Integrate ML forecasts or multi-sprint dashboards. Discover our Learni training to deepen advanced Agile.