BeeswarmChart

import { BeeswarmChart } from "@grassroot/charts-react";
 
const values = [
  { label: "Acquisition", value: 42, color: "var(--accent)" },
  { label: "Activation", value: 28, color: "var(--vs-success)" },
  { label: "Retention", value: 18, color: "var(--vs-warning)" },
];
 
 
<BeeswarmChart points={values.map((item) => ({ group: "funnel", value: item.value, label: item.label }))} />

<script setup lang="ts">
import { BeeswarmChart } from "@grassroot/charts-vue";
 
const values = [
  { label: "Acquisition", value: 42, color: "var(--accent)" },
  { label: "Activation", value: 28, color: "var(--vs-success)" },
  { label: "Retention", value: 18, color: "var(--vs-warning)" },
];
</script>
 
<template>
  <BeeswarmChart :points='values.map((item) => ({ group: "funnel", value: item.value, label: item.label }))' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootBeeswarmChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-beeswarm-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBeeswarmChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-beeswarm-chart [points]='values.map((item) => ({ group: "funnel", value: item.value, label: item.label }))' />`,
})
export class BeeswarmChartDemoComponent {
  readonly values = [
    { label: "Acquisition", value: 42, color: "var(--accent)" },
    { label: "Activation", value: 28, color: "var(--vs-success)" },
    { label: "Retention", value: 18, color: "var(--vs-warning)" },
  ];
}
 
export default BeeswarmChartDemoComponent;

<script lang="ts">
  import { BeeswarmChart } from "@grassroot/charts-svelte";
 
  const values = [
    { label: "Acquisition", value: 42, color: "var(--accent)" },
    { label: "Activation", value: 28, color: "var(--vs-success)" },
    { label: "Retention", value: 18, color: "var(--vs-warning)" },
  ];
</script>
 
<BeeswarmChart points={values.map((item) => ({ group: "funnel", value: item.value, label: item.label }))} />

/** @jsxImportSource solid-js */
import { BeeswarmChart } from "@grassroot/charts-solid";
 
const values = [
  { label: "Acquisition", value: 42, color: "var(--accent)" },
  { label: "Activation", value: 28, color: "var(--vs-success)" },
  { label: "Retention", value: 18, color: "var(--vs-warning)" },
];
 
export default function BeeswarmChartDemo() {
  return <BeeswarmChart points={values.map((item) => ({ group: "funnel", value: item.value, label: item.label }))} />;
}