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:

Bar.svelte

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

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

  /**
   * @typedef {Object} Props
   * @property {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.
   */

  /** @type {Props} */
  let { fill = '#00bbff' } = $props();
</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>