SlopegraphChart

import { SlopegraphChart } from "@grassroot/charts-react";
 
export default function SlopegraphChartDemo() {
  return (
    <div>
      <SlopegraphChart
        data={[
          {
            label: "North campus",
            start: 41,
            end: 68,
          },
          {
            label: "East campus",
            start: 44,
            end: 61,
          },
          {
            label: "South campus",
            start: 32,
            end: 58,
          },
          {
            label: "West campus",
            start: 53,
            end: 74,
          },
          {
            label: "Docklands",
            start: 36,
            end: 55,
          },
          {
            label: "Edinburgh",
            start: 48,
            end: 71,
          },
          {
            label: "Cardiff",
            start: 29,
            end: 52,
          },
          {
            label: "Belfast",
            start: 34,
            end: 49,
          },
        ]}
        startLabel="2022"
        endLabel="2026"
        ariaLabel="Renewable electricity share in percent for eight campuses, comparing 2022 with 2026" />
    </div>
  );
}

<script setup lang="ts">
import { SlopegraphChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <SlopegraphChart
    :data="[
      {
        label: 'North campus',
        start: 41,
        end: 68,
      },
      {
        label: 'East campus',
        start: 44,
        end: 61,
      },
      {
        label: 'South campus',
        start: 32,
        end: 58,
      },
      {
        label: 'West campus',
        start: 53,
        end: 74,
      },
      {
        label: 'Docklands',
        start: 36,
        end: 55,
      },
      {
        label: 'Edinburgh',
        start: 48,
        end: 71,
      },
      {
        label: 'Cardiff',
        start: 29,
        end: 52,
      },
      {
        label: 'Belfast',
        start: 34,
        end: 49,
      },
    ]"
    start-label="2022"
    end-label="2026"
    aria-label="Renewable electricity share in percent for eight campuses, comparing 2022 with 2026" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootSlopegraphChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-slopegraph-chart-chart-demo",
  standalone: true,
  imports: [GrassrootSlopegraphChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-slopegraph-chart
    [data]="[
      {
        label: 'North campus',
        start: 41,
        end: 68,
      },
      {
        label: 'East campus',
        start: 44,
        end: 61,
      },
      {
        label: 'South campus',
        start: 32,
        end: 58,
      },
      {
        label: 'West campus',
        start: 53,
        end: 74,
      },
      {
        label: 'Docklands',
        start: 36,
        end: 55,
      },
      {
        label: 'Edinburgh',
        start: 48,
        end: 71,
      },
      {
        label: 'Cardiff',
        start: 29,
        end: 52,
      },
      {
        label: 'Belfast',
        start: 34,
        end: 49,
      },
    ]"
    startLabel="2022"
    endLabel="2026"
    ariaLabel="Renewable electricity share in percent for eight campuses, comparing 2022 with 2026"
  />`,
})
export class SlopegraphChartDemoComponent {
}
 
export default SlopegraphChartDemoComponent;

<script lang="ts">
  import { SlopegraphChart } from "@grassroot/charts-svelte";
</script>
 
<SlopegraphChart
  data={[
    {
      label: "North campus",
      start: 41,
      end: 68,
    },
    {
      label: "East campus",
      start: 44,
      end: 61,
    },
    {
      label: "South campus",
      start: 32,
      end: 58,
    },
    {
      label: "West campus",
      start: 53,
      end: 74,
    },
    {
      label: "Docklands",
      start: 36,
      end: 55,
    },
    {
      label: "Edinburgh",
      start: 48,
      end: 71,
    },
    {
      label: "Cardiff",
      start: 29,
      end: 52,
    },
    {
      label: "Belfast",
      start: 34,
      end: 49,
    },
  ]}
  startLabel="2022"
  endLabel="2026"
  ariaLabel="Renewable electricity share in percent for eight campuses, comparing 2022 with 2026" />

/** @jsxImportSource solid-js */
import { SlopegraphChart } from "@grassroot/charts-solid";
 
export default function SlopegraphChartDemo() {
  return (
    <SlopegraphChart
      data={[
        {
          label: "North campus",
          start: 41,
          end: 68,
        },
        {
          label: "East campus",
          start: 44,
          end: 61,
        },
        {
          label: "South campus",
          start: 32,
          end: 58,
        },
        {
          label: "West campus",
          start: 53,
          end: 74,
        },
        {
          label: "Docklands",
          start: 36,
          end: 55,
        },
        {
          label: "Edinburgh",
          start: 48,
          end: 71,
        },
        {
          label: "Cardiff",
          start: 29,
          end: 52,
        },
        {
          label: "Belfast",
          start: 34,
          end: 49,
        },
      ]}
      startLabel="2022"
      endLabel="2026"
      ariaLabel="Renewable electricity share in percent for eight campuses, comparing 2022 with 2026" />
  );
}