# Stacked bar chart (Chartist example)

> Three series stacked per quarter, with a plugin that widens every bar.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import './style.css';
import { barChart } from 'chartist';

barChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      [800000, 1200000, 1400000, 1300000],
      [200000, 400000, 500000, 300000],
      [100000, 200000, 400000, 600000]
    ]
  },
  {
    stackBars: true,
    axisY: {
      labelInterpolationFnc: value => +value / 1000 + 'k'
    }
  }
);
```

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

`src/style.css`:

```css
/* Wide bars: a custom property, no JavaScript needed. */
#chart {
  --ct-bar-width: 30px;
}
```

The same chart with the 1.x classes (`src/main.classic.ts`):

```ts
import 'chartist/styles.css';
import { BarChart } from 'chartist';
import { compat } from 'chartist/compat';

new BarChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      [800000, 1200000, 1400000, 1300000],
      [200000, 400000, 500000, 300000],
      [100000, 200000, 400000, 600000]
    ]
  },
  {
    // 1.x draw events come from the compat plugin in v2.
    plugins: [compat],
    stackBars: true,
    axisY: {
      labelInterpolationFnc: value => +value / 1000 + 'k'
    }
  }
).on('draw', data => {
  if (data.type === 'bar') {
    data.element.attr({
      style: 'stroke-width: 30px'
    });
  }
});
```