React Timeline Chart

A timeline chart shows when things happen and how long they take. Each task or event is a bar on a time axis, from its start date to its end date, like a simple Gantt chart.

In AdminKit for React you draw it with ApexChart (Chart setup). For ApexCharts, a timeline is a rangeBar chart with horizontal bars.

ExampleCopy Anchor Link

import { ApexChart } from "@/components/plugins/apexcharts";

const day = (date: string) => new Date(date).getTime();

const tasks = [
  { x: "Code", y: [day("2026-03-02"), day("2026-03-04")] },
  { x: "Test", y: [day("2026-03-04"), day("2026-03-08")] },
  { x: "Validation", y: [day("2026-03-08"), day("2026-03-12")] },
  { x: "Deployment", y: [day("2026-03-12"), day("2026-03-18")] },
];

export function ReleaseTimeline() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          series: [{ data: tasks }],
          chart: { height: 350, type: "rangeBar" },
          plotOptions: { bar: { horizontal: true } },
          xaxis: { type: "datetime" },
        })}
      />
    </div>
  );
}

The bars take the primary color, the first default color of the wrapper.

PropsCopy Anchor Link

DataCopy Anchor Link

Each bar is { x, y }. x is the task, shown as the label on the y-axis. y is [start, end], as timestamps.

new Date("2026-03-02") reads a date without a time as midnight UTC. ApexCharts shows datetime labels in UTC too, so the bars start on the day boundaries.

Sometimes one task should stand out, such as the one in progress. Give that point its own color with fillColor, here a theme color:

<ApexChart
  options={(theme) => ({
    series: [
      {
        data: [
          { x: "Code", y: [day("2026-03-02"), day("2026-03-04")] },
          {
            x: "Test",
            y: [day("2026-03-04"), day("2026-03-08")],
            fillColor: theme.warning,
          },
        ],
      },
    ],
    chart: { height: 350, type: "rangeBar" },
    plotOptions: { bar: { horizontal: true } },
    xaxis: { type: "datetime" },
  })}
/>

With several series, for example one per team, ApexCharts draws each in its own color and lists them in the legend.

AccessibilityCopy Anchor Link

• The start and end dates show in the tooltip on hover only. List the dates in text or a table next to the chart, such as in a task list.
• A fillColor that marks a state also needs that state in text: color alone does not tell it.
• Name the chart with role="figure" and aria-label="Release 2.4 schedule". ApexChart puts other props on its <div>.

RelatedCopy Anchor Link

• Next.js timeline chart: the same chart in AdminKit for Next.js
• Bootstrap 5 timeline chart: the ApexCharts example of the HTML version
• Chart setup: the ApexChart, ChartJs and VectorMap components
• React column chart: bars from zero, for values per category
• ApexCharts demo: the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo