# Grouped stacked bars (Chartist example)

> New and returning customers per quarter, one stack per year, drawn by two bar layers side by side.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  bar,
  cartesianAxes,
  chart,
  stepAxis
} from 'chartist';

// New and returning customers per quarter: one stack per year.
chart('#chart', {
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: '2024 new', data: [5, 3, 4, 6] },
      { name: '2024 returning', data: [2, 2, 3, 3] },
      { name: '2025 new', data: [4, 6, 5, 7] },
      { name: '2025 returning', data: [3, 4, 4, 5] }
    ]
  },
  axes: cartesianAxes({
    x: { type: stepAxis() },
    y: { type: autoScaleAxis(), low: 0 }
  }),
  layers: [
    axisGrid(),
    // Each layer stacks its own year; the offsets put the stacks side by side.
    bar({
      series: ['2024 new', '2024 returning'],
      stackBars: true,
      offset: -8
    }),
    bar({ series: ['2025 new', '2025 returning'], stackBars: true, offset: 8 }),
    axisLabels()
  ],
  // The bar chart class centers the X labels under the bars.
  className: 'ct-chart-bar'
});
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart" style="height: 50vh"></div>
  </body>
</html>
```