Menu

Bar.svelte component

Generates an SVG bar chart.

Param Default Required Description
fill String '#00bbff'
no
The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color.

Used in these examples:

SSR Examples:

<!--
  @component
  Generates an SVG bar chart.
 -->
<script>
  import { getContext } from 'svelte';

  const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');

  /** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
  export let fill = '#00bbff';
</script>

<g class="bar-group">
  {#each $data as d, i}
    <rect
      class='group-rect'
      data-id="{i}"
      x="{$xScale.range()[0]}"
      y="{$yGet(d)}"
      height={$yScale.bandwidth()}
      width="{$xGet(d)}"
      {fill}
    ></rect>
  {/each}
</g>