Rendering

Parameters

config ChartConfig

The chart: data, axes, layers, plugins and listeners

size SceneSize

The size to lay out at, in px, and how to measure text

Returns

Example

import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  cartesianAxes,
  line,
  node,
  renderToString,
  stepAxis,
  toScene
} from 'chartist';

const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const scene = toScene(
  {
    data: { labels, series: [[12, 9, 7, 8, 5]] },
    axes: cartesianAxes([
      { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
      { id: 'y', side: 'left', type: autoScaleAxis() }
    ]),
    layers: [axisGrid(), line(), axisLabels()],
    viewBox: { width: 600, height: 300 },
    on: {
      // Styles inside the SVG, for tools that read it on its own.
      scene: ({ scene }) => ({
        scene: scene.append(
          node('style').text('.ct-line { fill: none; stroke: #d70206; }'),
          true
        )
      })
    }
  },
  { width: 600, height: 300 }
);

export const markup = renderToString(scene);

Example

import { seriesColors } from 'chartist';

// The color of series `c`, the third.
export const third = seriesColors[2];

Example

import { chart, domRenderer, pie, type Renderer } from 'chartist';

const dom = domRenderer();
// The DOM renderer, with a name for screen readers on every render.
const renderer: Renderer = {
  ...dom,
  render(scene, container) {
    const output = dom.render(scene, container);
    output.svg.setAttribute('role', 'img');
    output.svg.setAttribute('aria-label', 'Monthly budget');
    return output;
  }
};

chart('#chart', {
  data: { series: [50, 30, 20] },
  coordinates: 'polar',
  layers: [pie()],
  renderer
});

Example

import { estimateText, type MeasureText } from 'chartist';

// Bold labels: a tenth wider than the estimate.
export const measureText: MeasureText = (text, options) => {
  const size = estimateText(text, options);
  return { ...size, width: size.width * 1.1 };
};

Parameters

scene SceneNode

A scene, usually from toScene()

Returns

Example

import {
  autoScaleAxis,
  axisGrid,
  axisLabels,
  cartesianAxes,
  line,
  renderToString,
  stepAxis,
  toScene
} from 'chartist';

export function weekChart(values: number[]): string {
  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
  const scene = toScene(
    {
      data: { labels, series: [values] },
      axes: cartesianAxes([
        { id: 'x', side: 'bottom', type: stepAxis(), ticks: labels },
        { id: 'y', side: 'left', type: autoScaleAxis() }
      ]),
      layers: [axisGrid(), line(), axisLabels()],
      className: 'ct-chart-line'
    },
    { width: 600, height: 300 }
  );
  return renderToString(scene);
}

Properties

readonly width number

The width to lay out at, in px. The root svg gets it as its width, unless the config sets one.

readonly height number

The height to lay out at, in px. The root svg gets it as its height, unless the config sets one.

readonly measureText? MeasureText

Text measurement for layout; an estimate by default.

readonly labels? LabelMode

Label mode when the config sets none: svg by default, since string output often goes to tools without HTML support.

Properties

readonly svg SVGSVGElement

The chart's svg element, in the container.

readonly elementOf (node: SceneNode) => Element | undefined

The rendered element of a scene node of this render.

readonly remove () => void

Takes the SVG out of the container again.

Properties

readonly width number

The text's width in px.

readonly height number

The text's height in px: one line.

readonly fontSize? number

The font size in px the text was measured with, when known.

Properties

readonly classes? readonly string[]

Class names of the text, for renderers that apply CSS.

readonly fontSize? number

Font size in px. Without it, the browser measures with the CSS font size and the estimate uses 12, the size of 1.x .ct-label.

readonly rootClass? string

Classes of the chart's root svg, so chart-type CSS applies.

readonly container? Element

Where to measure (the chart container), so its CSS applies.

Example

import type { MeasureText } from 'chartist';

// Wider glyphs than the estimate, for a wide font.
export const measureText: MeasureText = (text, options = {}) => {
  const fontSize = options.fontSize ?? 12;
  return { width: text.length * fontSize * 0.7, height: fontSize * 1.25 };
};

Properties

readonly classes? readonly string[]

Class names of the element whose style is read.

readonly rootClass? string

Classes of the chart's root svg, so chart-type CSS applies.

readonly container? Element

Where to measure (the chart container), so its CSS applies.

Example

import { domRenderer, type Renderer } from 'chartist';

// The DOM renderer, but donuts are laid out for 30px rings, whatever
// the stylesheet says. Pass it as `renderer` to `chart()`.
export const renderer: Renderer = {
  ...domRenderer(),
  measureStyle: property => (property === 'stroke-width' ? '30px' : undefined)
};

Properties

readonly elementOf? (node: SceneNode) => Element | undefined

The rendered element of a scene node, if the output is DOM.

readonly remove? () => void

Removes the output again.

Properties

render (scene: SceneNode, target: Element) => TOutput

Renders a scene into the chart's container, after the scene phase and on every update and resize.

readonly measureText? MeasureText

Measures text for layout, in the container so its CSS applies; without it, Chartist estimates text sizes.

readonly measureStyle? MeasureStyle

Reads computed styles for layout, in the container so its CSS applies; without it, layout uses its defaults (a donut's ring is laid out for 60 px).

readonly labels? LabelMode

The default label mode of this renderer; html if omitted.