SlopegraphChart

import { SlopegraphChart } from "@grassroot/charts-react";
 
<SlopegraphChart data={[{ label: "Activation", start: 12, end: 24 }, { label: "Retention", start: 20, end: 18 }]} />

<script setup lang="ts">
import { SlopegraphChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <SlopegraphChart :data='[{ label: "Activation", start: 12, end: 24 }, { label: "Retention", start: 20, end: 18 }]' />
</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: "Activation", start: 12, end: 24 }, { label: "Retention", start: 20, end: 18 }]' />`,
})
export class SlopegraphChartDemoComponent {
 
}
 
export default SlopegraphChartDemoComponent;

<script lang="ts">
  import { SlopegraphChart } from "@grassroot/charts-svelte";
</script>
 
<SlopegraphChart data={[{ label: "Activation", start: 12, end: 24 }, { label: "Retention", start: 20, end: 18 }]} />

/** @jsxImportSource solid-js */
import { SlopegraphChart } from "@grassroot/charts-solid";
 
export default function SlopegraphChartDemo() {
  return <SlopegraphChart data={[{ label: "Activation", start: 12, end: 24 }, { label: "Retention", start: 20, end: 18 }]} />;
}