# React Timeline Chart

A React timeline chart with ApexCharts in AdminKit PRO: tasks as horizontal bars from a start to an end date, drawn as a rangeBar chart.

> This component is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

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](/react/) you draw it with `ApexChart` ([Chart setup](/react/docs/charts/overview/#apexcharts)). For [ApexCharts](https://apexcharts.com/), a timeline is a `rangeBar` chart with horizontal bars.

## Example

```html
<div id="apexcharts-timeline"></div>

<script>
var options = {
  series: [
    {
      data: [
        {
          x: "Code",
          y: [new Date("2026-03-02").getTime(), new Date("2026-03-04").getTime()]
        },
        {
          x: "Test",
          y: [new Date("2026-03-04").getTime(), new Date("2026-03-08").getTime()]
        },
        {
          x: "Validation",
          y: [new Date("2026-03-08").getTime(), new Date("2026-03-12").getTime()]
        },
        {
          x: "Deployment",
          y: [new Date("2026-03-12").getTime(), new Date("2026-03-18").getTime()]
        }
      ]
    }
  ],
  chart: {
    height: 350,
    type: "rangeBar"
  },
  plotOptions: {
    bar: {
      horizontal: true
    }
  },
  xaxis: {
    type: "datetime"
  }
};

adminkit.apexcharts("#apexcharts-timeline", function () {
  return options;
});
</script>
```
```tsx code
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.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

## Data

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:

```tsx
<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.

## Accessibility

- 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>`.

## Related

- [Next.js timeline chart](/nextjs/docs/charts/timeline-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 timeline chart](/bootstrap/docs/charts/timeline-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React column chart](/react/docs/charts/column-chart/): bars from zero, for values per category
- [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts): the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo

---

Canonical HTML page: https://adminkit.io/react/docs/charts/timeline-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io