Menu

Bar

Since we want an ordinal y-axis and Layer Cake defaults to a linear scale, pass in a custom scale to yScale with a few formatting options. Set the x-scale to always start at 0 so you don't show misleading differences between groups.

import LayerCake from 'layercake';
import { scaleBand } from 'd3-scale';
import groups from './data/groups.js';
import Bar from './components/Bar.html';
import AxisX from './components/AxisX.html';
import AxisY from './components/AxisYScaleBand.html';

const myCake = new LayerCake({
  padding: { top: 0, right: 20, bottom: 20, left: 30 },
  x: 'value',
  y: 'year',
  yScale: scaleBand().paddingInner([0.05]).round(true),
  yDomain: ['1979', '1980', '1981', '1982', '1983'],
  xDomain: [0, null],
  data: groups,
  target: document.getElementById('my-chart')
})
  .svgLayers([
    { component: AxisX, opts: { gridlines: true, baseline: true, snapTicks: true } },
    { component: AxisY, opts: { gridlines: false } },
    { component: Bar, opts: {} }
  ]);

myCake.render();