# Extreme responsive configuration (Chartist example)

> Five series per quarter that switch between stacked, horizontal and grouped bars as the screen grows.

`src/main.ts`:

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

barChart(
  '#chart',
  {
    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
    series: [
      [5, 4, 3, 7],
      [3, 2, 9, 5],
      [1, 5, 8, 4],
      [2, 3, 4, 6],
      [4, 1, 2, 1]
    ]
  },
  {
    // Default mobile configuration
    stackBars: true,
    axisX: {
      labelInterpolationFnc: value =>
        String(value)
          .split(/\s+/)
          .map(word => word[0])
          .join('')
    },
    axisY: {
      offset: 20
    }
  },
  [
    // Options override for media > 400px
    [
      'screen and (min-width: 400px)',
      {
        reverseData: true,
        horizontalBars: true,
        axisX: {
          labelInterpolationFnc: noop
        },
        axisY: {
          offset: 60
        }
      }
    ],
    // Options override for media > 800px
    [
      'screen and (min-width: 800px)',
      {
        stackBars: false,
        seriesBarDistance: 10
      }
    ],
    // Options override for media > 1000px
    [
      'screen and (min-width: 1000px)',
      {
        reverseData: false,
        horizontalBars: false,
        seriesBarDistance: 15
      }
    ]
  ]
);
```

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

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

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

new BarChart(
  '#chart',
  {
    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
    series: [
      [5, 4, 3, 7],
      [3, 2, 9, 5],
      [1, 5, 8, 4],
      [2, 3, 4, 6],
      [4, 1, 2, 1]
    ]
  },
  {
    // Default mobile configuration
    stackBars: true,
    axisX: {
      labelInterpolationFnc: value =>
        String(value)
          .split(/\s+/)
          .map(word => word[0])
          .join('')
    },
    axisY: {
      offset: 20
    }
  },
  [
    // Options override for media > 400px
    [
      'screen and (min-width: 400px)',
      {
        reverseData: true,
        horizontalBars: true,
        axisX: {
          labelInterpolationFnc: noop
        },
        axisY: {
          offset: 60
        }
      }
    ],
    // Options override for media > 800px
    [
      'screen and (min-width: 800px)',
      {
        stackBars: false,
        seriesBarDistance: 10
      }
    ],
    // Options override for media > 1000px
    [
      'screen and (min-width: 1000px)',
      {
        reverseData: false,
        horizontalBars: false,
        seriesBarDistance: 15
      }
    ]
  ]
);
```