# Container queries (experimental) (Chartist example)

> One config in a narrow and a wide container: the narrow one drops the margin line, its axis and the grid.

`src/main.ts`:

```ts
// Experimental: container() conditions need Element.matchContainer(), which
// browsers don't ship yet. The polyfill provides it.
import 'match-container';
import 'chartist/styles.css';
import './style.css';
import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  bar,
  cartesianAxes,
  chart,
  container,
  line,
  responsive,
  stepAxis
} from 'chartist';

const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
const quarterAxis = {
  id: 'quarters',
  side: 'bottom',
  type: stepAxis()
} as const;
const revenueAxis = {
  id: 'revenue',
  side: 'left',
  type: autoScaleAxis(),
  referenceValue: 0
} as const;
const revenueBars = bar({ series: ['revenue'], x: 'quarters', y: 'revenue' });

// One config for both cells. By the size of its own container, the narrow
// one shows only the revenue bars: no margin line, axis or grid.
for (const cell of document.querySelectorAll('.cell')) {
  chart(cell, {
    data: {
      labels: quarters,
      series: [
        { name: 'revenue', data: [120, 150, 170, 210] },
        { name: 'margin', data: [12, 18, 15, 22] }
      ]
    },
    axes: cartesianAxes([
      quarterAxis,
      revenueAxis,
      {
        id: 'margin',
        side: 'right',
        type: autoScaleAxis(),
        low: 0,
        onlyInteger: true,
        labelInterpolationFnc: value => `${value}%`
      }
    ]),
    layers: [
      axisGrid({ axes: ['quarters', 'revenue'] }),
      revenueBars,
      line({ series: ['margin'], x: 'quarters', y: 'margin', align: 'center' }),
      axisLabels()
    ],
    responsive: responsive([
      [
        container('(width < 400px)'),
        {
          axes: cartesianAxes([quarterAxis, revenueAxis]),
          layers: [revenueBars, axisLabels()]
        }
      ]
    ])
  });
}
```

`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">
      <div class="cell narrow"></div>
      <div class="cell wide"></div>
    </div>
  </body>
</html>
```

`src/style.css`:

```css
#chart {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* The queried container: container() conditions need a container-type. */
.cell {
  container-type: inline-size;
  height: 260px;
}

.narrow {
  width: 300px;
}

.wide {
  width: 660px;
}

/* Narrower windows: the cards stack, each at most half the window high;
   the narrow one stays under 400px, so the container queries still pick
   different options for each. */
@media (max-width: 1000px) {
  #chart {
    flex-direction: column;
    gap: 12px;
  }

  .cell {
    height: min(260px, calc(50vh - 30px));
  }

  .narrow {
    width: min(300px, 100%);
  }

  .wide {
    width: 100%;
  }
}
```