stacks apart by axis and type

Edit the JavaScript. Run it. See your drawing take shape.

bar + area

JAVASCRIPT

import { layoutChart, toSvgChart } from '@borrowdale/charts';
import { excalifontFiles } from '@borrowdale/text/excalifont-files';

const spec = {
  "width": 320,
  "height": 220,
  "style": {
    "fillStyle": "solid"
  },
  "axes": {
    "x": {
      "type": "band",
      "categories": [
        "Q1",
        "Q2",
        "Q3"
      ]
    },
    "y": {
      "type": "linear"
    },
    "y2": {
      "type": "linear"
    }
  },
  "series": [
    {
      "type": "bar",
      "name": "A",
      "stack": "s",
      "data": [
        1,
        2,
        3
      ]
    },
    {
      "type": "bar",
      "name": "B",
      "stack": "s",
      "data": [
        2,
        1,
        2
      ]
    },
    {
      "type": "bar",
      "name": "C",
      "stack": "s",
      "axis": "y2",
      "data": [
        5,
        6,
        7
      ]
    },
    {
      "type": "area",
      "name": "D",
      "stack": "s",
      "data": [
        1,
        1,
        1
      ]
    }
  ],
  "seed": 7
};

const svg = toSvgChart(layoutChart(spec), { fontFiles: excalifontFiles });
render(svg);

LIVE PREVIEWPreparing…

Named imports from the four BorrowdaleJS packages are available. Call render(svg) to show the result. The preview loads Excalifont. In your app, put the SVG in a container. Drafts stay in memory while you browse; Reset restores the example. Execution stops after 3 seconds.