# Responsive (Chartist API)

> Options that change with media queries or with the size of the chart’s container.

## container

*experimental*

```ts
function container(query: string): ContainerCondition
```

Marks a responsive entry as a container query, evaluated against the chart container or an ancestor with a CSS `container-type`. Needs `Element.matchContainer()`; until browsers ship it, load the `match-container` polyfill. Without it, Chartist warns once and ignores container entries; in `toScene()`, they never match.

Works in the responsive entries of `chart()` and of the presets.

Parameters:

- `query: string` The condition you'd write after `@container` in CSS

```ts
import 'match-container';
import { container, lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[12, 9, 7, 8, 5]]
  },
  { low: 0 },
  [
    [
      container('(width < 400px)'),
      {
        showPoint: false,
        axisX: { labelInterpolationFnc: value => String(value)[0] }
      }
    ]
  ]
);
```

## responsive

*experimental*

```ts
function responsive<T>(entries: readonly ResponsiveEntry<T>[]): ResponsiveSet<T>
```

Responsive overrides for `chart()`: `[condition, overrides]` entries with a media query string or a `container()` condition. Matching overrides are shallow-merged over the config in order, so later entries win and an override replaces a whole option (e.g. all `layers`).

When the matching entries change, the chart emits a `responsive` event with the config before and after, and renders again.

Parameters:

- `entries: readonly ResponsiveEntry<T>[]` `[condition, overrides]` pairs; the overrides are a partial config: padding, axes, layers, size and the like

```ts
import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  cartesianAxes,
  chart,
  line,
  responsive,
  stepAxis
} from 'chartist';

const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];

chart('#chart', {
  data: { labels, series: [[12, 9, 7, 8, 5]] },
  axes: cartesianAxes([
    { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
    { id: 'y', side: 'left', type: autoScaleAxis(), low: 0 }
  ]),
  layers: [axisGrid(), line({ showArea: true }), axisLabels()],
  responsive: responsive([
    [
      '(max-width: 640px)',
      {
        padding: 5,
        layers: [axisGrid(), line({ showPoint: false }), axisLabels()]
      }
    ]
  ])
});
```

## ContainerCondition

*experimental*

```ts
interface ContainerCondition
```

A container query condition for a responsive entry, created with [`container`](https://chartist.dev/api/responsive/#container).

Properties:

- `type: 'container'` Always `container`: tells the condition from a media query string.
- `query: string` A `@container` condition, e.g. `(width < 400px)`.

## ResponsiveCondition

*experimental*

```ts
type ResponsiveCondition = string | ContainerCondition
```

When a responsive entry applies: a window media query string, such as `(max-width: 640px)` (as in 1.x), or a [`container`](https://chartist.dev/api/responsive/#container) condition. Media queries are matched in the window of the chart's container, so a chart in an iframe follows the iframe's viewport.

## ResponsiveEntry

*experimental*

```ts
type ResponsiveEntry<T> = readonly [ResponsiveCondition, T]
```

A responsive entry: a condition and the overrides that apply while it matches, e.g. `['(max-width: 640px)', { showPoint: false }]`. Matching entries apply in order, so later ones win.

## ResponsiveWatcher

*experimental*

```ts
interface ResponsiveWatcher
```

Watches the conditions of a [`ResponsiveSet`](https://chartist.dev/api/responsive/#ResponsiveSet)'s entries, as its `watch()` returns it: which entries match, and when that changes.

Properties:

- `matching: readonly number[]` Indexes of the matching entries, as of the last `check()`.
- `check: () => boolean` Re-reads all conditions; true if the matching set changed.
- `stop: () => void` Stops watching: no more `onChange` calls, and no listeners left.

## ResponsiveSet

*experimental*

```ts
interface ResponsiveSet<T>
```

Responsive entries for `chart()`, with the watcher that evaluates them. Created by `responsive()`, so charts without responsive entries don't bundle the watcher.

Properties:

- `entries: readonly ResponsiveEntry<T>[]` The entries as given to `responsive()`.
- `watch: (host: Element | undefined, onChange: () => void) => ResponsiveWatcher` Starts watching the entries' conditions; `chart()` calls it. Calls `onChange` when the set of matching entries changes.