StackedAreaChart

import { StackedAreaChart } from "@grassroot/charts-react";
 
<StackedAreaChart series={[{ name: "new", values: [4, 8, 12, 16] }, { name: "returning", values: [7, 9, 10, 14] }]} />

<script setup lang="ts">
import { StackedAreaChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <StackedAreaChart :series='[{ name: "new", values: [4, 8, 12, 16] }, { name: "returning", values: [7, 9, 10, 14] }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootStackedAreaChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-stacked-area-chart-chart-demo",
  standalone: true,
  imports: [GrassrootStackedAreaChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-stacked-area-chart [series]='[{ name: "new", values: [4, 8, 12, 16] }, { name: "returning", values: [7, 9, 10, 14] }]' />`,
})
export class StackedAreaChartDemoComponent {
 
}
 
export default StackedAreaChartDemoComponent;

<script lang="ts">
  import { StackedAreaChart } from "@grassroot/charts-svelte";
</script>
 
<StackedAreaChart series={[{ name: "new", values: [4, 8, 12, 16] }, { name: "returning", values: [7, 9, 10, 14] }]} />

/** @jsxImportSource solid-js */
import { StackedAreaChart } from "@grassroot/charts-solid";
 
export default function StackedAreaChartDemo() {
  return <StackedAreaChart series={[{ name: "new", values: [4, 8, 12, 16] }, { name: "returning", values: [7, 9, 10, 14] }]} />;
}