DocsChartsSpatial & maps

BubbleMap

import { BubbleMap } from "@grassroot/charts-react";
 
const ukFeatures = [
  {
    id: "scotland",
    label: "Scotland",
    value: 68,
    color: "var(--accent)",
    polygons: [[[-6.8, 55.0], [-5.5, 55.2], [-4.2, 56.0], [-2.4, 56.0], [-1.8, 57.0], [-3.1, 58.6], [-4.8, 58.7], [-6.2, 57.8], [-7.4, 57.2], [-6.8, 55.0]]],
  },
  {
    id: "england-wales",
    label: "England/Wales",
    value: 84,
    color: "var(--vs-success)",
    polygons: [[[-5.7, 50.1], [-3.8, 50.2], [-1.2, 50.7], [1.4, 51.2], [1.1, 52.5], [-0.2, 53.2], [-1.8, 53.8], [-3.2, 53.5], [-4.5, 52.8], [-5.3, 51.7], [-5.7, 50.1]]],
  },
  {
    id: "northern-ireland",
    label: "N. Ireland",
    value: 46,
    color: "var(--vs-warning)",
    polygons: [[[-8.2, 54.0], [-6.2, 54.1], [-5.6, 55.0], [-6.5, 55.5], [-7.9, 55.1], [-8.2, 54.0]]],
  },
];
const geoPoints = [
  { longitude: -0.1, latitude: 51.5, value: 10, label: "London" },
  { longitude: -3.2, latitude: 55.9, value: 7, label: "Edinburgh" },
  { longitude: -3.2, latitude: 51.5, value: 5, label: "Cardiff" },
  { longitude: -5.9, latitude: 54.6, value: 4, label: "Belfast" },
];
 
 
<BubbleMap features={ukFeatures} points={geoPoints} />

<script setup lang="ts">
import { BubbleMap } from "@grassroot/charts-vue";
 
const ukFeatures = [
  {
    id: "scotland",
    label: "Scotland",
    value: 68,
    color: "var(--accent)",
    polygons: [[[-6.8, 55.0], [-5.5, 55.2], [-4.2, 56.0], [-2.4, 56.0], [-1.8, 57.0], [-3.1, 58.6], [-4.8, 58.7], [-6.2, 57.8], [-7.4, 57.2], [-6.8, 55.0]]],
  },
  {
    id: "england-wales",
    label: "England/Wales",
    value: 84,
    color: "var(--vs-success)",
    polygons: [[[-5.7, 50.1], [-3.8, 50.2], [-1.2, 50.7], [1.4, 51.2], [1.1, 52.5], [-0.2, 53.2], [-1.8, 53.8], [-3.2, 53.5], [-4.5, 52.8], [-5.3, 51.7], [-5.7, 50.1]]],
  },
  {
    id: "northern-ireland",
    label: "N. Ireland",
    value: 46,
    color: "var(--vs-warning)",
    polygons: [[[-8.2, 54.0], [-6.2, 54.1], [-5.6, 55.0], [-6.5, 55.5], [-7.9, 55.1], [-8.2, 54.0]]],
  },
];
const geoPoints = [
  { longitude: -0.1, latitude: 51.5, value: 10, label: "London" },
  { longitude: -3.2, latitude: 55.9, value: 7, label: "Edinburgh" },
  { longitude: -3.2, latitude: 51.5, value: 5, label: "Cardiff" },
  { longitude: -5.9, latitude: 54.6, value: 4, label: "Belfast" },
];
</script>
 
<template>
  <BubbleMap :features='ukFeatures' :points='geoPoints' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootBubbleMap } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-bubble-map-chart-demo",
  standalone: true,
  imports: [GrassrootBubbleMap],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-bubble-map [features]='ukFeatures' [points]='geoPoints' />`,
})
export class BubbleMapDemoComponent {
  readonly ukFeatures = [
    {
      id: "scotland",
      label: "Scotland",
      value: 68,
      color: "var(--accent)",
      polygons: [[[-6.8, 55.0], [-5.5, 55.2], [-4.2, 56.0], [-2.4, 56.0], [-1.8, 57.0], [-3.1, 58.6], [-4.8, 58.7], [-6.2, 57.8], [-7.4, 57.2], [-6.8, 55.0]]],
    },
    {
      id: "england-wales",
      label: "England/Wales",
      value: 84,
      color: "var(--vs-success)",
      polygons: [[[-5.7, 50.1], [-3.8, 50.2], [-1.2, 50.7], [1.4, 51.2], [1.1, 52.5], [-0.2, 53.2], [-1.8, 53.8], [-3.2, 53.5], [-4.5, 52.8], [-5.3, 51.7], [-5.7, 50.1]]],
    },
    {
      id: "northern-ireland",
      label: "N. Ireland",
      value: 46,
      color: "var(--vs-warning)",
      polygons: [[[-8.2, 54.0], [-6.2, 54.1], [-5.6, 55.0], [-6.5, 55.5], [-7.9, 55.1], [-8.2, 54.0]]],
    },
  ];
  readonly geoPoints = [
    { longitude: -0.1, latitude: 51.5, value: 10, label: "London" },
    { longitude: -3.2, latitude: 55.9, value: 7, label: "Edinburgh" },
    { longitude: -3.2, latitude: 51.5, value: 5, label: "Cardiff" },
    { longitude: -5.9, latitude: 54.6, value: 4, label: "Belfast" },
  ];
}
 
export default BubbleMapDemoComponent;

<script lang="ts">
  import { BubbleMap } from "@grassroot/charts-svelte";
 
  const ukFeatures = [
    {
      id: "scotland",
      label: "Scotland",
      value: 68,
      color: "var(--accent)",
      polygons: [[[-6.8, 55.0], [-5.5, 55.2], [-4.2, 56.0], [-2.4, 56.0], [-1.8, 57.0], [-3.1, 58.6], [-4.8, 58.7], [-6.2, 57.8], [-7.4, 57.2], [-6.8, 55.0]]],
    },
    {
      id: "england-wales",
      label: "England/Wales",
      value: 84,
      color: "var(--vs-success)",
      polygons: [[[-5.7, 50.1], [-3.8, 50.2], [-1.2, 50.7], [1.4, 51.2], [1.1, 52.5], [-0.2, 53.2], [-1.8, 53.8], [-3.2, 53.5], [-4.5, 52.8], [-5.3, 51.7], [-5.7, 50.1]]],
    },
    {
      id: "northern-ireland",
      label: "N. Ireland",
      value: 46,
      color: "var(--vs-warning)",
      polygons: [[[-8.2, 54.0], [-6.2, 54.1], [-5.6, 55.0], [-6.5, 55.5], [-7.9, 55.1], [-8.2, 54.0]]],
    },
  ];
  const geoPoints = [
    { longitude: -0.1, latitude: 51.5, value: 10, label: "London" },
    { longitude: -3.2, latitude: 55.9, value: 7, label: "Edinburgh" },
    { longitude: -3.2, latitude: 51.5, value: 5, label: "Cardiff" },
    { longitude: -5.9, latitude: 54.6, value: 4, label: "Belfast" },
  ];
</script>
 
<BubbleMap features={ukFeatures} points={geoPoints} />

/** @jsxImportSource solid-js */
import { BubbleMap } from "@grassroot/charts-solid";
 
const ukFeatures = [
  {
    id: "scotland",
    label: "Scotland",
    value: 68,
    color: "var(--accent)",
    polygons: [[[-6.8, 55.0], [-5.5, 55.2], [-4.2, 56.0], [-2.4, 56.0], [-1.8, 57.0], [-3.1, 58.6], [-4.8, 58.7], [-6.2, 57.8], [-7.4, 57.2], [-6.8, 55.0]]],
  },
  {
    id: "england-wales",
    label: "England/Wales",
    value: 84,
    color: "var(--vs-success)",
    polygons: [[[-5.7, 50.1], [-3.8, 50.2], [-1.2, 50.7], [1.4, 51.2], [1.1, 52.5], [-0.2, 53.2], [-1.8, 53.8], [-3.2, 53.5], [-4.5, 52.8], [-5.3, 51.7], [-5.7, 50.1]]],
  },
  {
    id: "northern-ireland",
    label: "N. Ireland",
    value: 46,
    color: "var(--vs-warning)",
    polygons: [[[-8.2, 54.0], [-6.2, 54.1], [-5.6, 55.0], [-6.5, 55.5], [-7.9, 55.1], [-8.2, 54.0]]],
  },
];
const geoPoints = [
  { longitude: -0.1, latitude: 51.5, value: 10, label: "London" },
  { longitude: -3.2, latitude: 55.9, value: 7, label: "Edinburgh" },
  { longitude: -3.2, latitude: 51.5, value: 5, label: "Cardiff" },
  { longitude: -5.9, latitude: 54.6, value: 4, label: "Belfast" },
];
 
export default function BubbleMapDemo() {
  return <BubbleMap features={ukFeatures} points={geoPoints} />;
}

Installation

pnpmnpmyarnbun

bash

pnpm dlx grassroot add chart/bubble-map

bash

npx grassroot@latest add chart/bubble-map

bash

yarn dlx grassroot add chart/bubble-map

bash

bunx grassroot add chart/bubble-map

API Reference

`BubbleMapProps`
Prop	Type	Default
`features`	`readonly GeoFeature[] \| undefined`	—
`points`	`readonly GeoPoint[] \| undefined`	—
`gpuBackend`	`ChartGpuBackend \| undefined`	—
`width`	`number \| undefined`	—
`height`	`number \| undefined`	—
`renderPlanMode`	`"svg" \| "host" \| undefined`	—
`rendererStrategy`	`Partial<import("@grassroot/core").ChartRendererStrategy> \| undefined`	—
`showGrid`	`boolean \| undefined`	—
`legend`	`boolean \| import("@grassroot/interaction/core").LegendConfig \| undefined`	—
`tooltip`	`boolean \| import("./base").ExpandedChartTooltipConfig<unknown> \| undefined`	—
`animation`	`boolean \| import("./base").ExpandedChartAnimationConfig \| undefined`	—
`interactive`Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.	`boolean \| undefined`	—
`hiddenSeries`	`readonly string[] \| undefined`	—
`defaultHiddenSeries`	`readonly string[] \| undefined`	—
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`	—
`activeDatum`	`string \| null \| undefined`	—
`defaultActiveDatum`Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.	`string \| null \| undefined`	—
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`	—
`renderer`	`ChartRenderer \| undefined`	—
`className`	`string \| undefined`	—
`theme`	`import("@grassroot/theme").PartialChartTheme \| undefined`	—
`title`	`string \| undefined`	—
`description`	`string \| undefined`	—
`ariaLabel`	`string \| undefined`	—
`keyboardNavigation`	`boolean \| undefined`	—