Quick Start

This is an example with React. Different approaches are required for other frameworks.

import React, { useEffect, useState } from 'react';
import { ChartStyle, ChartType, StandardCharts, VarianceType } from 'standard-charts';

export function App() {
  const [ref, setRef] = useState();

  useEffect(() => {
    StandardCharts([
      {
        type: ChartType.Scenario,
        style: ChartStyle.Column,
        width: 300,
        height: 300,
        variances: [
          {
            variance: VarianceType.Absolute,
            delta: Scenario.PY,
          },
        ],
        data: [
          { key: '2022', PY: 22, AC: 29 },
          { key: '2023', PY: 37, AC: 31 },
          { key: '2024', PY: 26, FC: 32 },
        ],
      },
    ]).then((charts) => {
      setRef(charts[0]);
    });
  }, []);

  return <img src={ref} />;
}

Now this simple column chart should appear: