ScatterChart

import { useState } from "react";
const scatterChartFixture = {
  id: "scatter-chart",
  points: [
    { x: 8, y: 142, label: "Brand search", group: "Brand" },
    { x: 14, y: 218, label: "Homepage takeover", group: "Brand" },
    { x: 18, y: 326, label: "Spring launch", group: "Brand" },
    { x: 22, y: 368, label: "Retail window", group: "Brand" },
    { x: 26, y: 404, label: "Sustainability", group: "Brand" },
    { x: 30, y: 441, label: "Founder film", group: "Brand" },
    { x: 34, y: 478, label: "Summer video", group: "Brand" },
    { x: 38, y: 502, label: "Press tour", group: "Brand" },
    { x: 41, y: 519, label: "Podcast series", group: "Brand" },
    { x: 9, y: 196, label: "Shopping ads", group: "Performance" },
    { x: 12, y: 284, label: "Competitor search", group: "Performance" },
    { x: 15, y: 328, label: "Brand + generic", group: "Performance" },
    { x: 17, y: 372, label: "Non-brand search", group: "Performance" },
    { x: 20, y: 408, label: "PMax", group: "Performance" },
    { x: 23, y: 451, label: "Retargeting", group: "Performance" },
    { x: 26, y: 494, label: "Lookalike", group: "Performance" },
    { x: 29, y: 536, label: "Partner display", group: "Performance" },
    { x: 33, y: 574, label: "Comparison sites", group: "Performance" },
    { x: 37, y: 612, label: "Affiliate offer", group: "Performance" },
    { x: 42, y: 648, label: "App install", group: "Performance" },
    { x: 46, y: 681, label: "Category search", group: "Performance" },
    { x: 11, y: 88, label: "Newsletter", group: "Owned" },
    { x: 16, y: 154, label: "Lifecycle SMS", group: "Owned" },
    { x: 21, y: 212, label: "Win-back", group: "Owned" },
    { x: 27, y: 268, label: "Referral bonus", group: "Owned" },
    { x: 32, y: 306, label: "Loyalty drop", group: "Owned" },
    { x: 39, y: 348, label: "App push", group: "Owned" },
  ],
  ariaLabel: "Qualified leads versus campaign spend in thousands of pounds, Q2 2026",
  tooltip: true,
  legend: true,
  xAxisLabel: "Spend (£k)",
  yAxisLabel: "Qualified leads",
};
 
import { ScatterChart } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
 
export default function ScatterChartDemo() {
  const [ellipses, setEllipses] = useState<"none" | "confidence">("none");
  return (
    <div>
      <VariantToggle
        label="Uncertainty"
        options={[
          { value: "none" as const, label: "Points" },
          { value: "confidence" as const, label: "Ellipses" },
        ]}
        value={ellipses}
        onChange={setEllipses}
      />
      <ScatterChart {...scatterChartFixture} ellipses={ellipses} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const scatterChartFixture = {
  id: "scatter-chart",
  points: [
    { x: 8, y: 142, label: "Brand search", group: "Brand" },
    { x: 14, y: 218, label: "Homepage takeover", group: "Brand" },
    { x: 18, y: 326, label: "Spring launch", group: "Brand" },
    { x: 22, y: 368, label: "Retail window", group: "Brand" },
    { x: 26, y: 404, label: "Sustainability", group: "Brand" },
    { x: 30, y: 441, label: "Founder film", group: "Brand" },
    { x: 34, y: 478, label: "Summer video", group: "Brand" },
    { x: 38, y: 502, label: "Press tour", group: "Brand" },
    { x: 41, y: 519, label: "Podcast series", group: "Brand" },
    { x: 9, y: 196, label: "Shopping ads", group: "Performance" },
    { x: 12, y: 284, label: "Competitor search", group: "Performance" },
    { x: 15, y: 328, label: "Brand + generic", group: "Performance" },
    { x: 17, y: 372, label: "Non-brand search", group: "Performance" },
    { x: 20, y: 408, label: "PMax", group: "Performance" },
    { x: 23, y: 451, label: "Retargeting", group: "Performance" },
    { x: 26, y: 494, label: "Lookalike", group: "Performance" },
    { x: 29, y: 536, label: "Partner display", group: "Performance" },
    { x: 33, y: 574, label: "Comparison sites", group: "Performance" },
    { x: 37, y: 612, label: "Affiliate offer", group: "Performance" },
    { x: 42, y: 648, label: "App install", group: "Performance" },
    { x: 46, y: 681, label: "Category search", group: "Performance" },
    { x: 11, y: 88, label: "Newsletter", group: "Owned" },
    { x: 16, y: 154, label: "Lifecycle SMS", group: "Owned" },
    { x: 21, y: 212, label: "Win-back", group: "Owned" },
    { x: 27, y: 268, label: "Referral bonus", group: "Owned" },
    { x: 32, y: 306, label: "Loyalty drop", group: "Owned" },
    { x: 39, y: 348, label: "App push", group: "Owned" },
  ],
  ariaLabel: "Qualified leads versus campaign spend in thousands of pounds, Q2 2026",
  tooltip: true,
  legend: true,
  xAxisLabel: "Spend (£k)",
  yAxisLabel: "Qualified leads",
};
 
import { ScatterChart } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const ellipses = ref<"none" | "confidence">("none");
const ellipseModes = [
  { value: "none", label: "Points" },
  { value: "confidence", label: "Ellipses" },
];
</script>
<template>
  <div>
    <VariantToggle v-model="ellipses" label="Uncertainty" :options="ellipseModes" /><ScatterChart
      v-bind="scatterChartFixture"
      :ellipses="ellipses" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
const scatterChartFixture = {
  id: "scatter-chart",
  points: [
    { x: 8, y: 142, label: "Brand search", group: "Brand" },
    { x: 14, y: 218, label: "Homepage takeover", group: "Brand" },
    { x: 18, y: 326, label: "Spring launch", group: "Brand" },
    { x: 22, y: 368, label: "Retail window", group: "Brand" },
    { x: 26, y: 404, label: "Sustainability", group: "Brand" },
    { x: 30, y: 441, label: "Founder film", group: "Brand" },
    { x: 34, y: 478, label: "Summer video", group: "Brand" },
    { x: 38, y: 502, label: "Press tour", group: "Brand" },
    { x: 41, y: 519, label: "Podcast series", group: "Brand" },
    { x: 9, y: 196, label: "Shopping ads", group: "Performance" },
    { x: 12, y: 284, label: "Competitor search", group: "Performance" },
    { x: 15, y: 328, label: "Brand + generic", group: "Performance" },
    { x: 17, y: 372, label: "Non-brand search", group: "Performance" },
    { x: 20, y: 408, label: "PMax", group: "Performance" },
    { x: 23, y: 451, label: "Retargeting", group: "Performance" },
    { x: 26, y: 494, label: "Lookalike", group: "Performance" },
    { x: 29, y: 536, label: "Partner display", group: "Performance" },
    { x: 33, y: 574, label: "Comparison sites", group: "Performance" },
    { x: 37, y: 612, label: "Affiliate offer", group: "Performance" },
    { x: 42, y: 648, label: "App install", group: "Performance" },
    { x: 46, y: 681, label: "Category search", group: "Performance" },
    { x: 11, y: 88, label: "Newsletter", group: "Owned" },
    { x: 16, y: 154, label: "Lifecycle SMS", group: "Owned" },
    { x: 21, y: 212, label: "Win-back", group: "Owned" },
    { x: 27, y: 268, label: "Referral bonus", group: "Owned" },
    { x: 32, y: 306, label: "Loyalty drop", group: "Owned" },
    { x: 39, y: 348, label: "App push", group: "Owned" },
  ],
  ariaLabel: "Qualified leads versus campaign spend in thousands of pounds, Q2 2026",
  tooltip: true,
  legend: true,
  xAxisLabel: "Spend (£k)",
  yAxisLabel: "Qualified leads",
};
 
import { GrassrootScatterChart } from "@grassroot/charts-angular";
import { VariantToggleComponent } from "./VariantToggle.component";
@Component({
  selector: "app-scatter-chart-chart-demo",
  standalone: true,
  imports: [GrassrootScatterChart, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Uncertainty"
      [options]="ellipseModes"
      [value]="ellipses()"
      (valueChange)="setEllipses($event)"
    /><grassroot-scatter-chart
    [ellipses]="ellipses()"
    [points]="fixture.points"
    [xAxisLabel]="fixture.xAxisLabel"
    [yAxisLabel]="fixture.yAxisLabel"
    [ariaLabel]="fixture.ariaLabel"
    [tooltip]="fixture.tooltip"
  />`,
})
export class ScatterChartDemoComponent {
  readonly fixture = scatterChartFixture;
  readonly ellipses = signal<"none" | "confidence">("none");
  readonly ellipseModes = [
    { value: "none", label: "Points" },
    { value: "confidence", label: "Ellipses" },
  ] as const;
  setEllipses(value: string): void {
    if (value === "none" || value === "confidence") this.ellipses.set(value);
  }
}
export default ScatterChartDemoComponent;

<script lang="ts">
  const scatterChartFixture = {
    id: "scatter-chart",
    points: [
      { x: 8, y: 142, label: "Brand search", group: "Brand" },
      { x: 14, y: 218, label: "Homepage takeover", group: "Brand" },
      { x: 18, y: 326, label: "Spring launch", group: "Brand" },
      { x: 22, y: 368, label: "Retail window", group: "Brand" },
      { x: 26, y: 404, label: "Sustainability", group: "Brand" },
      { x: 30, y: 441, label: "Founder film", group: "Brand" },
      { x: 34, y: 478, label: "Summer video", group: "Brand" },
      { x: 38, y: 502, label: "Press tour", group: "Brand" },
      { x: 41, y: 519, label: "Podcast series", group: "Brand" },
      { x: 9, y: 196, label: "Shopping ads", group: "Performance" },
      { x: 12, y: 284, label: "Competitor search", group: "Performance" },
      { x: 15, y: 328, label: "Brand + generic", group: "Performance" },
      { x: 17, y: 372, label: "Non-brand search", group: "Performance" },
      { x: 20, y: 408, label: "PMax", group: "Performance" },
      { x: 23, y: 451, label: "Retargeting", group: "Performance" },
      { x: 26, y: 494, label: "Lookalike", group: "Performance" },
      { x: 29, y: 536, label: "Partner display", group: "Performance" },
      { x: 33, y: 574, label: "Comparison sites", group: "Performance" },
      { x: 37, y: 612, label: "Affiliate offer", group: "Performance" },
      { x: 42, y: 648, label: "App install", group: "Performance" },
      { x: 46, y: 681, label: "Category search", group: "Performance" },
      { x: 11, y: 88, label: "Newsletter", group: "Owned" },
      { x: 16, y: 154, label: "Lifecycle SMS", group: "Owned" },
      { x: 21, y: 212, label: "Win-back", group: "Owned" },
      { x: 27, y: 268, label: "Referral bonus", group: "Owned" },
      { x: 32, y: 306, label: "Loyalty drop", group: "Owned" },
      { x: 39, y: 348, label: "App push", group: "Owned" },
    ],
    ariaLabel: "Qualified leads versus campaign spend in thousands of pounds, Q2 2026",
    tooltip: true,
    legend: true,
    xAxisLabel: "Spend (£k)",
    yAxisLabel: "Qualified leads",
  };
 
  import { ScatterChart } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let ellipses = $state<"none" | "confidence">("none");
  const ellipseModes = [
    { value: "none", label: "Points" },
    { value: "confidence", label: "Ellipses" },
  ];
</script>
 
<div>
  <VariantToggle
    label="Uncertainty"
    options={ellipseModes}
    value={ellipses}
    onchange={(value) => (ellipses = value as typeof ellipses)}
  />
  <ScatterChart {...scatterChartFixture} {ellipses} />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
const scatterChartFixture = {
  id: "scatter-chart",
  points: [
    { x: 8, y: 142, label: "Brand search", group: "Brand" },
    { x: 14, y: 218, label: "Homepage takeover", group: "Brand" },
    { x: 18, y: 326, label: "Spring launch", group: "Brand" },
    { x: 22, y: 368, label: "Retail window", group: "Brand" },
    { x: 26, y: 404, label: "Sustainability", group: "Brand" },
    { x: 30, y: 441, label: "Founder film", group: "Brand" },
    { x: 34, y: 478, label: "Summer video", group: "Brand" },
    { x: 38, y: 502, label: "Press tour", group: "Brand" },
    { x: 41, y: 519, label: "Podcast series", group: "Brand" },
    { x: 9, y: 196, label: "Shopping ads", group: "Performance" },
    { x: 12, y: 284, label: "Competitor search", group: "Performance" },
    { x: 15, y: 328, label: "Brand + generic", group: "Performance" },
    { x: 17, y: 372, label: "Non-brand search", group: "Performance" },
    { x: 20, y: 408, label: "PMax", group: "Performance" },
    { x: 23, y: 451, label: "Retargeting", group: "Performance" },
    { x: 26, y: 494, label: "Lookalike", group: "Performance" },
    { x: 29, y: 536, label: "Partner display", group: "Performance" },
    { x: 33, y: 574, label: "Comparison sites", group: "Performance" },
    { x: 37, y: 612, label: "Affiliate offer", group: "Performance" },
    { x: 42, y: 648, label: "App install", group: "Performance" },
    { x: 46, y: 681, label: "Category search", group: "Performance" },
    { x: 11, y: 88, label: "Newsletter", group: "Owned" },
    { x: 16, y: 154, label: "Lifecycle SMS", group: "Owned" },
    { x: 21, y: 212, label: "Win-back", group: "Owned" },
    { x: 27, y: 268, label: "Referral bonus", group: "Owned" },
    { x: 32, y: 306, label: "Loyalty drop", group: "Owned" },
    { x: 39, y: 348, label: "App push", group: "Owned" },
  ],
  ariaLabel: "Qualified leads versus campaign spend in thousands of pounds, Q2 2026",
  tooltip: true,
  legend: true,
  xAxisLabel: "Spend (£k)",
  yAxisLabel: "Qualified leads",
};
 
import { ScatterChart } from "@grassroot/charts-solid";
import { VariantToggle } from "./VariantToggle";
export default function ScatterChartDemo() {
  const [ellipses, setEllipses] = createSignal<"none" | "confidence">("none");
  const ellipseModes = [
    { value: "none", label: "Points" },
    { value: "confidence", label: "Ellipses" },
  ];
  return (
    <div>
      <VariantToggle
        label="Uncertainty"
        options={ellipseModes}
        value={ellipses}
        onChange={(value) => setEllipses(value as "none" | "confidence")}
      />
      <ScatterChart {...scatterChartFixture} ellipses={ellipses()} />
    </div>
  );
}