AreaChart

import { AreaChart } from "@grassroot/charts-react"; 
const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
<AreaChart animation={{ durationMs: 640, staggerMs: 32 }} ariaLabel="Cumulative signups, year to date" tooltip crosshair legend={{ position: "top" }} data={[5, 9, 14, 18, 26, 33, 39, 48, 57, 63, 72, 80]} labels={monthLabels} max={88} />

<script setup lang="ts">
import { AreaChart } from "@grassroot/charts-vue";
 
const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
</script>
 
<template>
  <AreaChart :animation='{ durationMs: 640, staggerMs: 32 }' ariaLabel="Cumulative signups, year to date" tooltip crosshair :legend='{ position: "top" }' :data='[5, 9, 14, 18, 26, 33, 39, 48, 57, 63, 72, 80]' :labels='monthLabels' :max='88' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootAreaChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-area-chart-chart-demo",
  standalone: true,
  imports: [GrassrootAreaChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-area-chart [animation]='{ durationMs: 640, staggerMs: 32 }' ariaLabel="Cumulative signups, year to date" tooltip crosshair [legend]='{ position: "top" }' [data]='[5, 9, 14, 18, 26, 33, 39, 48, 57, 63, 72, 80]' [labels]='monthLabels' [max]='88' />`,
})
export class AreaChartDemoComponent {
  readonly monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
}
 
export default AreaChartDemoComponent;

<script lang="ts">
  import { AreaChart } from "@grassroot/charts-svelte";
 
  const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
</script>
 
<AreaChart animation={{ durationMs: 640, staggerMs: 32 }} ariaLabel="Cumulative signups, year to date" tooltip crosshair legend={{ position: "top" }} data={[5, 9, 14, 18, 26, 33, 39, 48, 57, 63, 72, 80]} labels={monthLabels} max={88} />

/** @jsxImportSource solid-js */
import { AreaChart } from "@grassroot/charts-solid";
 
const monthLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
export default function AreaChartDemo() {
  return <AreaChart animation={{ durationMs: 640, staggerMs: 32 }} ariaLabel="Cumulative signups, year to date" tooltip crosshair legend={{ position: "top" }} data={[5, 9, 14, 18, 26, 33, 39, 48, 57, 63, 72, 80]} labels={monthLabels} max={88} />;
}