# Bootstrap 5 Timeline Chart

Timeline charts show a series of events or tasks as bars on a time axis. ApexCharts example for AdminKit PRO, in light and dark mode.

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

## ApexCharts example

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

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

---

Canonical HTML page: https://adminkit.io/bootstrap/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