<script>
  import * as Gateau from '@sveltejs/gateau';
 
  const points = [
    { x: 10, y: 8.04 },
    { x: 8, y: 6.95 },
    { x: 13, y: 7.58 },
    { x: 9, y: 8.81 },
    { x: 11, y: 8.33 },
    { x: 14, y: 9.96 },
    { x: 6, y: 7.24 },
    { x: 4, y: 4.26 },
    { x: 12, y: 10.84 },
    { x: 7, y: 4.82 },
    { x: 5, y: 5.68 }
  ];
</script>
 
<div class="container">
  <Gateau.Chart>
    <Gateau.Grid horizontal ticks={5}/>
    <Gateau.Grid vertical ticks={5}/>
 
    <Gateau.Scatterplot
      data={points}
      fill="orange"
      stroke="#333"
      radius={5}
    />
 
    <Gateau.Axis horizontal ticks={5} line labels/>
    <Gateau.Axis vertical ticks={5} labels/>
  </Gateau.Chart>
</div>