Menu

Column annotatedEdit

1979 1980 1981 1982 1983 0 5 10 15
Example text...

Since we want an ordinal x-axis and Layer Cake defaults to a linear scale, pass in a custom scale to xScale with a few formatting options. Set the y-scale to always start at 0 so you don't show misleading differences between groups. For the annotation arrowhead, note that, depending on your app structure, such as if you're using Sapper, you may need to provide an explicit link to your SVG marker id, such as in ./components/Arrows.svelte using window.location.href.

<script>
  import { LayerCake, Svg, Html } from 'layercake';
  import { scaleBand } from 'd3-scale';
  import groups from './data/groups.csv';

  import Column from './components/Column.svelte';
  import AxisXScaleBand from './components/AxisXScaleBand.svelte';
  import AxisY from './components/AxisY.svelte';
  import Annotations from './components/Annotations.svelte';
  import Arrows from './components/Arrows.svelte';
  import DefArrowhead from './components/DefArrowhead.svelte';

  const annotations = [
    {
      text: 'Example text...',
      top: '18%',
      left: '30%',
      arrows: [{
        clockwise: false, // true or false, defaults to true
        source: {
          anchor: 'left-bottom', // can be `{left, middle, right},{top-middle-bottom}`
          dx: -2,
          dy: -7
        },
        target: {
          x: '28%',
          y: '75%'
        }
      },
      {
        source: {
          anchor: 'right-bottom',
          dy: -7,
          dx: 5
        },
        target: {
          x: '68%',
          y: '48%'
        }
      }]
    }
  ];

  groups.forEach(row => {
    row.value = +row.value;
  });
</script>

<style>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>

<div class="chart-container">
  <LayerCake
      padding={{ top: 0, right: 0, bottom: 20, left: 20 }}
      x='year'
      y='value'
      xScale={scaleBand().paddingInner([0.02]).round(true)}
      xDomain={['1979', '1980', '1981', '1982', '1983']}
      yDomain={[0, null]}
      data={groups}
  >

    <Svg>
      <Column/>
      <AxisXScaleBand
        gridlines={false}
      />
      <AxisY
        gridlines={false}
      />
    </Svg>

    <Html>
      <Annotations {annotations}/>
    </Html>

    <Svg>
      <DefArrowhead/>
      <Arrows {annotations}/>
    </Svg>
  </LayerCake>

</div>