ScatterChart

import { ScatterChart } from "@grassroot/charts-react"; 
const serviceScatterPoints = [
  { id: "ledger-api", x: 120, y: 38, color: "var(--vs-success)", label: "ledger-api" },
  { id: "search", x: 88, y: 52, color: "var(--vs-success)", label: "search" },
  { id: "billing-worker", x: 210, y: 28, color: "var(--vs-error)", label: "billing-worker" },
  { id: "edge-gateway", x: 156, y: 44, color: "var(--vs-warning)", label: "edge-gateway" },
  { id: "auth", x: 60, y: 68, color: "var(--accent)", label: "auth" },
  { id: "analytics", x: 174, y: 33, color: "var(--vs-warning)", label: "analytics" },
  { id: "cache", x: 132, y: 49, color: "var(--vs-success)", label: "cache" },
  { id: "webhooks", x: 98, y: 61, color: "var(--accent)", label: "webhooks" },
];
 
<ScatterChart animation={{ durationMs: 460, staggerMs: 24 }} ariaLabel="Latency versus throughput per service" tooltip crosshair legend={{ position: "top" }} points={serviceScatterPoints} />

<script setup lang="ts">
import { ScatterChart } from "@grassroot/charts-vue";
 
const serviceScatterPoints = [
  { id: "ledger-api", x: 120, y: 38, color: "var(--vs-success)", label: "ledger-api" },
  { id: "search", x: 88, y: 52, color: "var(--vs-success)", label: "search" },
  { id: "billing-worker", x: 210, y: 28, color: "var(--vs-error)", label: "billing-worker" },
  { id: "edge-gateway", x: 156, y: 44, color: "var(--vs-warning)", label: "edge-gateway" },
  { id: "auth", x: 60, y: 68, color: "var(--accent)", label: "auth" },
  { id: "analytics", x: 174, y: 33, color: "var(--vs-warning)", label: "analytics" },
  { id: "cache", x: 132, y: 49, color: "var(--vs-success)", label: "cache" },
  { id: "webhooks", x: 98, y: 61, color: "var(--accent)", label: "webhooks" },
];
</script>
 
<template>
  <ScatterChart :animation='{ durationMs: 460, staggerMs: 24 }' ariaLabel="Latency versus throughput per service" tooltip crosshair :legend='{ position: "top" }' :points='serviceScatterPoints' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootScatterChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-scatter-chart-chart-demo",
  standalone: true,
  imports: [GrassrootScatterChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-scatter-chart [animation]='{ durationMs: 460, staggerMs: 24 }' ariaLabel="Latency versus throughput per service" tooltip crosshair [legend]='{ position: "top" }' [points]='serviceScatterPoints' />`,
})
export class ScatterChartDemoComponent {
  readonly serviceScatterPoints = [
    { id: "ledger-api", x: 120, y: 38, color: "var(--vs-success)", label: "ledger-api" },
    { id: "search", x: 88, y: 52, color: "var(--vs-success)", label: "search" },
    { id: "billing-worker", x: 210, y: 28, color: "var(--vs-error)", label: "billing-worker" },
    { id: "edge-gateway", x: 156, y: 44, color: "var(--vs-warning)", label: "edge-gateway" },
    { id: "auth", x: 60, y: 68, color: "var(--accent)", label: "auth" },
    { id: "analytics", x: 174, y: 33, color: "var(--vs-warning)", label: "analytics" },
    { id: "cache", x: 132, y: 49, color: "var(--vs-success)", label: "cache" },
    { id: "webhooks", x: 98, y: 61, color: "var(--accent)", label: "webhooks" },
  ];
}
 
export default ScatterChartDemoComponent;

<script lang="ts">
  import { ScatterChart } from "@grassroot/charts-svelte";
 
  const serviceScatterPoints = [
    { id: "ledger-api", x: 120, y: 38, color: "var(--vs-success)", label: "ledger-api" },
    { id: "search", x: 88, y: 52, color: "var(--vs-success)", label: "search" },
    { id: "billing-worker", x: 210, y: 28, color: "var(--vs-error)", label: "billing-worker" },
    { id: "edge-gateway", x: 156, y: 44, color: "var(--vs-warning)", label: "edge-gateway" },
    { id: "auth", x: 60, y: 68, color: "var(--accent)", label: "auth" },
    { id: "analytics", x: 174, y: 33, color: "var(--vs-warning)", label: "analytics" },
    { id: "cache", x: 132, y: 49, color: "var(--vs-success)", label: "cache" },
    { id: "webhooks", x: 98, y: 61, color: "var(--accent)", label: "webhooks" },
  ];
</script>
 
<ScatterChart animation={{ durationMs: 460, staggerMs: 24 }} ariaLabel="Latency versus throughput per service" tooltip crosshair legend={{ position: "top" }} points={serviceScatterPoints} />

/** @jsxImportSource solid-js */
import { ScatterChart } from "@grassroot/charts-solid";
 
const serviceScatterPoints = [
  { id: "ledger-api", x: 120, y: 38, color: "var(--vs-success)", label: "ledger-api" },
  { id: "search", x: 88, y: 52, color: "var(--vs-success)", label: "search" },
  { id: "billing-worker", x: 210, y: 28, color: "var(--vs-error)", label: "billing-worker" },
  { id: "edge-gateway", x: 156, y: 44, color: "var(--vs-warning)", label: "edge-gateway" },
  { id: "auth", x: 60, y: 68, color: "var(--accent)", label: "auth" },
  { id: "analytics", x: 174, y: 33, color: "var(--vs-warning)", label: "analytics" },
  { id: "cache", x: 132, y: 49, color: "var(--vs-success)", label: "cache" },
  { id: "webhooks", x: 98, y: 61, color: "var(--accent)", label: "webhooks" },
];
 
export default function ScatterChartDemo() {
  return <ScatterChart animation={{ durationMs: 460, staggerMs: 24 }} ariaLabel="Latency versus throughput per service" tooltip crosshair legend={{ position: "top" }} points={serviceScatterPoints} />;
}