# Overlapping bars on mobile (Chartist example)

> Two series over twelve months whose bars move closer together and labels shorten on small screens.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import {
  barChart,
  type BarChartPresetOptions,
  type PresetResponsiveOptions
} from 'chartist';

const data = {
  labels: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'Mai',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ],
  series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

const options = {
  seriesBarDistance: 15
};

const responsiveOptions: PresetResponsiveOptions<BarChartPresetOptions> = [
  [
    'screen and (min-width: 641px) and (max-width: 1024px)',
    {
      seriesBarDistance: 10,
      axisX: {
        labelInterpolationFnc: value => value
      }
    }
  ],
  [
    'screen and (max-width: 640px)',
    {
      seriesBarDistance: 5,
      axisX: {
        labelInterpolationFnc: value => String(value)[0]
      }
    }
  ]
];

barChart('#chart', data, options, responsiveOptions);
```

`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,
  type BarChartOptions,
  type ResponsiveOptions
} from 'chartist';

const data = {
  labels: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'Mai',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ],
  series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

const options = {
  seriesBarDistance: 15
};

const responsiveOptions: ResponsiveOptions<BarChartOptions> = [
  [
    'screen and (min-width: 641px) and (max-width: 1024px)',
    {
      seriesBarDistance: 10,
      axisX: {
        labelInterpolationFnc: value => value
      }
    }
  ],
  [
    'screen and (max-width: 640px)',
    {
      seriesBarDistance: 5,
      axisX: {
        labelInterpolationFnc: value => String(value)[0]
      }
    }
  ]
];

new BarChart('#chart', data, options, responsiveOptions);
```