Responsive

container

experimentalSource

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

Example

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

experimentalSource

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

Example

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

experimentalSource

interface ContainerCondition

A container query condition for a responsive entry, created with container.

Properties

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

ResponsiveCondition

experimentalSource

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

experimentalSource

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

experimentalSource

interface ResponsiveWatcher

Watches the conditions of a ResponsiveSet's entries, as its watch() returns it: which entries match, and when that changes.

Properties

readonly 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

experimentalSource

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

readonly 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.