CurveGalleryChart

import { CurveGalleryChart } from "@grassroot/charts-react";
 
const xy = [
  {
    x: "6 Jan",
    y: 1280,
  },
  {
    x: "20 Jan",
    y: 1318,
  },
  {
    x: "3 Feb",
    y: 1364,
  },
  {
    x: "17 Feb",
    y: 1411,
  },
  {
    x: "3 Mar",
    y: 1468,
  },
  {
    x: "17 Mar",
    y: 1522,
  },
  {
    x: "31 Mar",
    y: 1588,
  },
  {
    x: "14 Apr",
    y: 1634,
  },
  {
    x: "28 Apr",
    y: 1689,
  },
  {
    x: "12 May",
    y: 1746,
  },
  {
    x: "26 May",
    y: 1798,
  },
  {
    x: "9 Jun",
    y: 1840,
  },
  {
    x: "23 Jun",
    y: 1896,
  },
  {
    x: "7 Jul",
    y: 1976,
  },
  {
    x: "21 Jul",
    y: 2054,
  },
  {
    x: "4 Aug",
    y: 2134,
  },
];
 
export default function CurveGalleryChartDemo() {
  return (
    <div>
      <CurveGalleryChart ariaLabel="Fortnightly active teams, 6 January to 4 August 2026" data={xy} />
    </div>
  );
}

<script setup lang="ts">
import { CurveGalleryChart } from "@grassroot/charts-vue";
 
const xy = [
  {
    x: "6 Jan",
    y: 1280,
  },
  {
    x: "20 Jan",
    y: 1318,
  },
  {
    x: "3 Feb",
    y: 1364,
  },
  {
    x: "17 Feb",
    y: 1411,
  },
  {
    x: "3 Mar",
    y: 1468,
  },
  {
    x: "17 Mar",
    y: 1522,
  },
  {
    x: "31 Mar",
    y: 1588,
  },
  {
    x: "14 Apr",
    y: 1634,
  },
  {
    x: "28 Apr",
    y: 1689,
  },
  {
    x: "12 May",
    y: 1746,
  },
  {
    x: "26 May",
    y: 1798,
  },
  {
    x: "9 Jun",
    y: 1840,
  },
  {
    x: "23 Jun",
    y: 1896,
  },
  {
    x: "7 Jul",
    y: 1976,
  },
  {
    x: "21 Jul",
    y: 2054,
  },
  {
    x: "4 Aug",
    y: 2134,
  },
];
</script>
 
<template>
  <CurveGalleryChart aria-label="Fortnightly active teams, 6 January to 4 August 2026" :data="xy" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootCurveGalleryChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-curve-gallery-chart-chart-demo",
  standalone: true,
  imports: [GrassrootCurveGalleryChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-curve-gallery-chart
    [ariaLabel]="'Fortnightly active teams, 6 January to 4 August 2026'"
    [data]="xy"
  />`,
})
export class CurveGalleryChartDemoComponent {
  readonly xy = [
    {
      x: "6 Jan",
      y: 1280,
    },
    {
      x: "20 Jan",
      y: 1318,
    },
    {
      x: "3 Feb",
      y: 1364,
    },
    {
      x: "17 Feb",
      y: 1411,
    },
    {
      x: "3 Mar",
      y: 1468,
    },
    {
      x: "17 Mar",
      y: 1522,
    },
    {
      x: "31 Mar",
      y: 1588,
    },
    {
      x: "14 Apr",
      y: 1634,
    },
    {
      x: "28 Apr",
      y: 1689,
    },
    {
      x: "12 May",
      y: 1746,
    },
    {
      x: "26 May",
      y: 1798,
    },
    {
      x: "9 Jun",
      y: 1840,
    },
    {
      x: "23 Jun",
      y: 1896,
    },
    {
      x: "7 Jul",
      y: 1976,
    },
    {
      x: "21 Jul",
      y: 2054,
    },
    {
      x: "4 Aug",
      y: 2134,
    },
  ];
}
 
export default CurveGalleryChartDemoComponent;

<script lang="ts">
  import { CurveGalleryChart } from "@grassroot/charts-svelte";
 
  const xy = [
    {
      x: "6 Jan",
      y: 1280,
    },
    {
      x: "20 Jan",
      y: 1318,
    },
    {
      x: "3 Feb",
      y: 1364,
    },
    {
      x: "17 Feb",
      y: 1411,
    },
    {
      x: "3 Mar",
      y: 1468,
    },
    {
      x: "17 Mar",
      y: 1522,
    },
    {
      x: "31 Mar",
      y: 1588,
    },
    {
      x: "14 Apr",
      y: 1634,
    },
    {
      x: "28 Apr",
      y: 1689,
    },
    {
      x: "12 May",
      y: 1746,
    },
    {
      x: "26 May",
      y: 1798,
    },
    {
      x: "9 Jun",
      y: 1840,
    },
    {
      x: "23 Jun",
      y: 1896,
    },
    {
      x: "7 Jul",
      y: 1976,
    },
    {
      x: "21 Jul",
      y: 2054,
    },
    {
      x: "4 Aug",
      y: 2134,
    },
  ];
</script>
 
<CurveGalleryChart ariaLabel="Fortnightly active teams, 6 January to 4 August 2026" data={xy} />

/** @jsxImportSource solid-js */
import { CurveGalleryChart } from "@grassroot/charts-solid";
 
const xy = [
  {
    x: "6 Jan",
    y: 1280,
  },
  {
    x: "20 Jan",
    y: 1318,
  },
  {
    x: "3 Feb",
    y: 1364,
  },
  {
    x: "17 Feb",
    y: 1411,
  },
  {
    x: "3 Mar",
    y: 1468,
  },
  {
    x: "17 Mar",
    y: 1522,
  },
  {
    x: "31 Mar",
    y: 1588,
  },
  {
    x: "14 Apr",
    y: 1634,
  },
  {
    x: "28 Apr",
    y: 1689,
  },
  {
    x: "12 May",
    y: 1746,
  },
  {
    x: "26 May",
    y: 1798,
  },
  {
    x: "9 Jun",
    y: 1840,
  },
  {
    x: "23 Jun",
    y: 1896,
  },
  {
    x: "7 Jul",
    y: 1976,
  },
  {
    x: "21 Jul",
    y: 2054,
  },
  {
    x: "4 Aug",
    y: 2134,
  },
];
 
export default function CurveGalleryChartDemo() {
  return <CurveGalleryChart ariaLabel="Fortnightly active teams, 6 January to 4 August 2026" data={xy} />;
}