Docs Charts Spatial & maps

CustomProjectionMap

import { CustomProjectionMap } from "@grassroot/charts-react";
 
const ukFeatures = [
  {
    id: "scotland",
    label: "Scotland",
    value: 142,
    color: "var(--accent)",
    polygons: [
      [
        [-6.8, 55],
        [-5.5, 55.2],
        [-4.2, 56],
        [-2.4, 56],
        [-1.8, 57],
        [-3.1, 58.6],
        [-4.8, 58.7],
        [-6.2, 57.8],
        [-7.4, 57.2],
        [-6.8, 55],
      ],
    ],
  },
  {
    id: "north-england",
    label: "North of England",
    value: 128,
    color: "var(--vs-success)",
    polygons: [
      [
        [-3.2, 53.5],
        [-0.2, 53.2],
        [0.1, 54.6],
        [-1.6, 55.8],
        [-3, 55],
        [-3.2, 53.5],
      ],
    ],
  },
  {
    id: "midlands",
    label: "Midlands",
    value: 121,
    color: "var(--vs-info)",
    polygons: [
      [
        [-3, 52.2],
        [-1.2, 51.8],
        [0.2, 52.6],
        [-0.2, 53.2],
        [-2.4, 53.4],
        [-3, 52.2],
      ],
    ],
  },
  {
    id: "south-east",
    label: "South East",
    value: 98,
    color: "var(--vs-warning)",
    polygons: [
      [
        [-1.2, 50.7],
        [1.4, 51.2],
        [1.1, 52],
        [-0.4, 52.2],
        [-1.2, 51.8],
        [-1.2, 50.7],
      ],
    ],
  },
  {
    id: "south-west",
    label: "South West",
    value: 136,
    color: "var(--accent)",
    polygons: [
      [
        [-5.7, 50.1],
        [-3.8, 50.2],
        [-1.2, 50.7],
        [-1.2, 51.8],
        [-3, 52.2],
        [-5.3, 51.7],
        [-5.7, 50.1],
      ],
    ],
  },
  {
    id: "wales",
    label: "Wales",
    value: 118,
    color: "var(--vs-success)",
    polygons: [
      [
        [-5.3, 51.7],
        [-3, 52.2],
        [-3.2, 53.4],
        [-4.5, 52.8],
        [-5.3, 51.7],
      ],
    ],
  },
  {
    id: "northern-ireland",
    label: "Northern Ireland",
    value: 76,
    color: "var(--vs-warning)",
    polygons: [
      [
        [-8.2, 54],
        [-6.2, 54.1],
        [-5.6, 55],
        [-6.5, 55.5],
        [-7.9, 55.1],
        [-8.2, 54],
      ],
    ],
  },
] as const;
const geoPoints = [
  {
    longitude: -0.13,
    latitude: 51.51,
    value: 126,
    label: "London",
  },
  {
    longitude: -2.24,
    latitude: 53.48,
    value: 154,
    label: "Manchester",
  },
  {
    longitude: -1.89,
    latitude: 52.49,
    value: 139,
    label: "Birmingham",
  },
  {
    longitude: -2.59,
    latitude: 51.45,
    value: 148,
    label: "Bristol",
  },
  {
    longitude: -3.18,
    latitude: 51.48,
    value: 132,
    label: "Cardiff",
  },
  {
    longitude: -4.25,
    latitude: 55.86,
    value: 161,
    label: "Glasgow",
  },
  {
    longitude: -3.19,
    latitude: 55.95,
    value: 149,
    label: "Edinburgh",
  },
  {
    longitude: -5.93,
    latitude: 54.6,
    value: 84,
    label: "Belfast",
  },
  {
    longitude: -1.55,
    latitude: 53.8,
    value: 141,
    label: "Leeds",
  },
  {
    longitude: -2.99,
    latitude: 53.41,
    value: 136,
    label: "Liverpool",
  },
  {
    longitude: -1.62,
    latitude: 54.97,
    value: 118,
    label: "Newcastle",
  },
  {
    longitude: -1.47,
    latitude: 53.38,
    value: 129,
    label: "Sheffield",
  },
  {
    longitude: -1.15,
    latitude: 52.95,
    value: 122,
    label: "Nottingham",
  },
  {
    longitude: -1.4,
    latitude: 50.91,
    value: 111,
    label: "Southampton",
  },
  {
    longitude: -4.14,
    latitude: 50.37,
    value: 117,
    label: "Plymouth",
  },
  {
    longitude: -2.1,
    latitude: 57.15,
    value: 134,
    label: "Aberdeen",
  },
  {
    longitude: -3.94,
    latitude: 51.62,
    value: 125,
    label: "Swansea",
  },
  {
    longitude: -7.32,
    latitude: 55,
    value: 79,
    label: "Derry",
  },
];
 
export default function CustomProjectionMapDemo() {
  return (
    <div>
      <CustomProjectionMap
        ariaLabel="Heat pump installations per 10,000 households across seven United Kingdom nations and regions and eighteen cities, 2026"
        features={ukFeatures}
        points={geoPoints} />
    </div>
  );
}

<script setup lang="ts">
import { CustomProjectionMap } from "@grassroot/charts-vue";
 
const ukFeatures = [
  {
    id: "scotland",
    label: "Scotland",
    value: 142,
    color: "var(--accent)",
    polygons: [
      [
        [-6.8, 55],
        [-5.5, 55.2],
        [-4.2, 56],
        [-2.4, 56],
        [-1.8, 57],
        [-3.1, 58.6],
        [-4.8, 58.7],
        [-6.2, 57.8],
        [-7.4, 57.2],
        [-6.8, 55],
      ],
    ],
  },
  {
    id: "north-england",
    label: "North of England",
    value: 128,
    color: "var(--vs-success)",
    polygons: [
      [
        [-3.2, 53.5],
        [-0.2, 53.2],
        [0.1, 54.6],
        [-1.6, 55.8],
        [-3, 55],
        [-3.2, 53.5],
      ],
    ],
  },
  {
    id: "midlands",
    label: "Midlands",
    value: 121,
    color: "var(--vs-info)",
    polygons: [
      [
        [-3, 52.2],
        [-1.2, 51.8],
        [0.2, 52.6],
        [-0.2, 53.2],
        [-2.4, 53.4],
        [-3, 52.2],
      ],
    ],
  },
  {
    id: "south-east",
    label: "South East",
    value: 98,
    color: "var(--vs-warning)",
    polygons: [
      [
        [-1.2, 50.7],
        [1.4, 51.2],
        [1.1, 52],
        [-0.4, 52.2],
        [-1.2, 51.8],
        [-1.2, 50.7],
      ],
    ],
  },
  {
    id: "south-west",
    label: "South West",
    value: 136,
    color: "var(--accent)",
    polygons: [
      [
        [-5.7, 50.1],
        [-3.8, 50.2],
        [-1.2, 50.7],
        [-1.2, 51.8],
        [-3, 52.2],
        [-5.3, 51.7],
        [-5.7, 50.1],
      ],
    ],
  },
  {
    id: "wales",
    label: "Wales",
    value: 118,
    color: "var(--vs-success)",
    polygons: [
      [
        [-5.3, 51.7],
        [-3, 52.2],
        [-3.2, 53.4],
        [-4.5, 52.8],
        [-5.3, 51.7],
      ],
    ],
  },
  {
    id: "northern-ireland",
    label: "Northern Ireland",
    value: 76,
    color: "var(--vs-warning)",
    polygons: [
      [
        [-8.2, 54],
        [-6.2, 54.1],
        [-5.6, 55],
        [-6.5, 55.5],
        [-7.9, 55.1],
        [-8.2, 54],
      ],
    ],
  },
];
const geoPoints = [
  {
    longitude: -0.13,
    latitude: 51.51,
    value: 126,
    label: "London",
  },
  {
    longitude: -2.24,
    latitude: 53.48,
    value: 154,
    label: "Manchester",
  },
  {
    longitude: -1.89,
    latitude: 52.49,
    value: 139,
    label: "Birmingham",
  },
  {
    longitude: -2.59,
    latitude: 51.45,
    value: 148,
    label: "Bristol",
  },
  {
    longitude: -3.18,
    latitude: 51.48,
    value: 132,
    label: "Cardiff",
  },
  {
    longitude: -4.25,
    latitude: 55.86,
    value: 161,
    label: "Glasgow",
  },
  {
    longitude: -3.19,
    latitude: 55.95,
    value: 149,
    label: "Edinburgh",
  },
  {
    longitude: -5.93,
    latitude: 54.6,
    value: 84,
    label: "Belfast",
  },
  {
    longitude: -1.55,
    latitude: 53.8,
    value: 141,
    label: "Leeds",
  },
  {
    longitude: -2.99,
    latitude: 53.41,
    value: 136,
    label: "Liverpool",
  },
  {
    longitude: -1.62,
    latitude: 54.97,
    value: 118,
    label: "Newcastle",
  },
  {
    longitude: -1.47,
    latitude: 53.38,
    value: 129,
    label: "Sheffield",
  },
  {
    longitude: -1.15,
    latitude: 52.95,
    value: 122,
    label: "Nottingham",
  },
  {
    longitude: -1.4,
    latitude: 50.91,
    value: 111,
    label: "Southampton",
  },
  {
    longitude: -4.14,
    latitude: 50.37,
    value: 117,
    label: "Plymouth",
  },
  {
    longitude: -2.1,
    latitude: 57.15,
    value: 134,
    label: "Aberdeen",
  },
  {
    longitude: -3.94,
    latitude: 51.62,
    value: 125,
    label: "Swansea",
  },
  {
    longitude: -7.32,
    latitude: 55,
    value: 79,
    label: "Derry",
  },
];
</script>
 
<template>
  <CustomProjectionMap
    aria-label="Heat pump installations per 10,000 households across seven United Kingdom nations and regions and eighteen cities, 2026"
    :features="ukFeatures"
    :points="geoPoints" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootCustomProjectionMap } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-custom-projection-map-chart-demo",
  standalone: true,
  imports: [GrassrootCustomProjectionMap],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-custom-projection-map
    [ariaLabel]="'Heat pump installations per 10,000 households across seven United Kingdom nations and regions and eighteen cities, 2026'"
    [features]="ukFeatures"
    [points]="geoPoints"
  />`,
})
export class CustomProjectionMapDemoComponent {
  readonly ukFeatures = [
    {
      id: "scotland",
      label: "Scotland",
      value: 142,
      color: "var(--accent)",
      polygons: [
        [
          [-6.8, 55],
          [-5.5, 55.2],
          [-4.2, 56],
          [-2.4, 56],
          [-1.8, 57],
          [-3.1, 58.6],
          [-4.8, 58.7],
          [-6.2, 57.8],
          [-7.4, 57.2],
          [-6.8, 55],
        ],
      ],
    },
    {
      id: "north-england",
      label: "North of England",
      value: 128,
      color: "var(--vs-success)",
      polygons: [
        [
          [-3.2, 53.5],
          [-0.2, 53.2],
          [0.1, 54.6],
          [-1.6, 55.8],
          [-3, 55],
          [-3.2, 53.5],
        ],
      ],
    },
    {
      id: "midlands",
      label: "Midlands",
      value: 121,
      color: "var(--vs-info)",
      polygons: [
        [
          [-3, 52.2],
          [-1.2, 51.8],
          [0.2, 52.6],
          [-0.2, 53.2],
          [-2.4, 53.4],
          [-3, 52.2],
        ],
      ],
    },
    {
      id: "south-east",
      label: "South East",
      value: 98,
      color: "var(--vs-warning)",
      polygons: [
        [
          [-1.2, 50.7],
          [1.4, 51.2],
          [1.1, 52],
          [-0.4, 52.2],
          [-1.2, 51.8],
          [-1.2, 50.7],
        ],
      ],
    },
    {
      id: "south-west",
      label: "South West",
      value: 136,
      color: "var(--accent)",
      polygons: [
        [
          [-5.7, 50.1],
          [-3.8, 50.2],
          [-1.2, 50.7],
          [-1.2, 51.8],
          [-3, 52.2],
          [-5.3, 51.7],
          [-5.7, 50.1],
        ],
      ],
    },
    {
      id: "wales",
      label: "Wales",
      value: 118,
      color: "var(--vs-success)",
      polygons: [
        [
          [-5.3, 51.7],
          [-3, 52.2],
          [-3.2, 53.4],
          [-4.5, 52.8],
          [-5.3, 51.7],
        ],
      ],
    },
    {
      id: "northern-ireland",
      label: "Northern Ireland",
      value: 76,
      color: "var(--vs-warning)",
      polygons: [
        [
          [-8.2, 54],
          [-6.2, 54.1],
          [-5.6, 55],
          [-6.5, 55.5],
          [-7.9, 55.1],
          [-8.2, 54],
        ],
      ],
    },
  ];
  readonly geoPoints = [
    {
      longitude: -0.13,
      latitude: 51.51,
      value: 126,
      label: "London",
    },
    {
      longitude: -2.24,
      latitude: 53.48,
      value: 154,
      label: "Manchester",
    },
    {
      longitude: -1.89,
      latitude: 52.49,
      value: 139,
      label: "Birmingham",
    },
    {
      longitude: -2.59,
      latitude: 51.45,
      value: 148,
      label: "Bristol",
    },
    {
      longitude: -3.18,
      latitude: 51.48,
      value: 132,
      label: "Cardiff",
    },
    {
      longitude: -4.25,
      latitude: 55.86,
      value: 161,
      label: "Glasgow",
    },
    {
      longitude: -3.19,
      latitude: 55.95,
      value: 149,
      label: "Edinburgh",
    },
    {
      longitude: -5.93,
      latitude: 54.6,
      value: 84,
      label: "Belfast",
    },
    {
      longitude: -1.55,
      latitude: 53.8,
      value: 141,
      label: "Leeds",
    },
    {
      longitude: -2.99,
      latitude: 53.41,
      value: 136,
      label: "Liverpool",
    },
    {
      longitude: -1.62,
      latitude: 54.97,
      value: 118,
      label: "Newcastle",
    },
    {
      longitude: -1.47,
      latitude: 53.38,
      value: 129,
      label: "Sheffield",
    },
    {
      longitude: -1.15,
      latitude: 52.95,
      value: 122,
      label: "Nottingham",
    },
    {
      longitude: -1.4,
      latitude: 50.91,
      value: 111,
      label: "Southampton",
    },
    {
      longitude: -4.14,
      latitude: 50.37,
      value: 117,
      label: "Plymouth",
    },
    {
      longitude: -2.1,
      latitude: 57.15,
      value: 134,
      label: "Aberdeen",
    },
    {
      longitude: -3.94,
      latitude: 51.62,
      value: 125,
      label: "Swansea",
    },
    {
      longitude: -7.32,
      latitude: 55,
      value: 79,
      label: "Derry",
    },
  ];
}
 
export default CustomProjectionMapDemoComponent;

<script lang="ts">
  import { CustomProjectionMap } from "@grassroot/charts-svelte";
 
  const ukFeatures = [
    {
      id: "scotland",
      label: "Scotland",
      value: 142,
      color: "var(--accent)",
      polygons: [
        [
          [-6.8, 55],
          [-5.5, 55.2],
          [-4.2, 56],
          [-2.4, 56],
          [-1.8, 57],
          [-3.1, 58.6],
          [-4.8, 58.7],
          [-6.2, 57.8],
          [-7.4, 57.2],
          [-6.8, 55],
        ],
      ],
    },
    {
      id: "north-england",
      label: "North of England",
      value: 128,
      color: "var(--vs-success)",
      polygons: [
        [
          [-3.2, 53.5],
          [-0.2, 53.2],
          [0.1, 54.6],
          [-1.6, 55.8],
          [-3, 55],
          [-3.2, 53.5],
        ],
      ],
    },
    {
      id: "midlands",
      label: "Midlands",
      value: 121,
      color: "var(--vs-info)",
      polygons: [
        [
          [-3, 52.2],
          [-1.2, 51.8],
          [0.2, 52.6],
          [-0.2, 53.2],
          [-2.4, 53.4],
          [-3, 52.2],
        ],
      ],
    },
    {
      id: "south-east",
      label: "South East",
      value: 98,
      color: "var(--vs-warning)",
      polygons: [
        [
          [-1.2, 50.7],
          [1.4, 51.2],
          [1.1, 52],
          [-0.4, 52.2],
          [-1.2, 51.8],
          [-1.2, 50.7],
        ],
      ],
    },
    {
      id: "south-west",
      label: "South West",
      value: 136,
      color: "var(--accent)",
      polygons: [
        [
          [-5.7, 50.1],
          [-3.8, 50.2],
          [-1.2, 50.7],
          [-1.2, 51.8],
          [-3, 52.2],
          [-5.3, 51.7],
          [-5.7, 50.1],
        ],
      ],
    },
    {
      id: "wales",
      label: "Wales",
      value: 118,
      color: "var(--vs-success)",
      polygons: [
        [
          [-5.3, 51.7],
          [-3, 52.2],
          [-3.2, 53.4],
          [-4.5, 52.8],
          [-5.3, 51.7],
        ],
      ],
    },
    {
      id: "northern-ireland",
      label: "Northern Ireland",
      value: 76,
      color: "var(--vs-warning)",
      polygons: [
        [
          [-8.2, 54],
          [-6.2, 54.1],
          [-5.6, 55],
          [-6.5, 55.5],
          [-7.9, 55.1],
          [-8.2, 54],
        ],
      ],
    },
  ];
  const geoPoints = [
    {
      longitude: -0.13,
      latitude: 51.51,
      value: 126,
      label: "London",
    },
    {
      longitude: -2.24,
      latitude: 53.48,
      value: 154,
      label: "Manchester",
    },
    {
      longitude: -1.89,
      latitude: 52.49,
      value: 139,
      label: "Birmingham",
    },
    {
      longitude: -2.59,
      latitude: 51.45,
      value: 148,
      label: "Bristol",
    },
    {
      longitude: -3.18,
      latitude: 51.48,
      value: 132,
      label: "Cardiff",
    },
    {
      longitude: -4.25,
      latitude: 55.86,
      value: 161,
      label: "Glasgow",
    },
    {
      longitude: -3.19,
      latitude: 55.95,
      value: 149,
      label: "Edinburgh",
    },
    {
      longitude: -5.93,
      latitude: 54.6,
      value: 84,
      label: "Belfast",
    },
    {
      longitude: -1.55,
      latitude: 53.8,
      value: 141,
      label: "Leeds",
    },
    {
      longitude: -2.99,
      latitude: 53.41,
      value: 136,
      label: "Liverpool",
    },
    {
      longitude: -1.62,
      latitude: 54.97,
      value: 118,
      label: "Newcastle",
    },
    {
      longitude: -1.47,
      latitude: 53.38,
      value: 129,
      label: "Sheffield",
    },
    {
      longitude: -1.15,
      latitude: 52.95,
      value: 122,
      label: "Nottingham",
    },
    {
      longitude: -1.4,
      latitude: 50.91,
      value: 111,
      label: "Southampton",
    },
    {
      longitude: -4.14,
      latitude: 50.37,
      value: 117,
      label: "Plymouth",
    },
    {
      longitude: -2.1,
      latitude: 57.15,
      value: 134,
      label: "Aberdeen",
    },
    {
      longitude: -3.94,
      latitude: 51.62,
      value: 125,
      label: "Swansea",
    },
    {
      longitude: -7.32,
      latitude: 55,
      value: 79,
      label: "Derry",
    },
  ];
</script>
 
<CustomProjectionMap
  ariaLabel="Heat pump installations per 10,000 households across seven United Kingdom nations and regions and eighteen cities, 2026"
  features={ukFeatures}
  points={geoPoints} />

/** @jsxImportSource solid-js */
import { CustomProjectionMap } from "@grassroot/charts-solid";
 
const ukFeatures = [
  {
    id: "scotland",
    label: "Scotland",
    value: 142,
    color: "var(--accent)",
    polygons: [
      [
        [-6.8, 55],
        [-5.5, 55.2],
        [-4.2, 56],
        [-2.4, 56],
        [-1.8, 57],
        [-3.1, 58.6],
        [-4.8, 58.7],
        [-6.2, 57.8],
        [-7.4, 57.2],
        [-6.8, 55],
      ],
    ],
  },
  {
    id: "north-england",
    label: "North of England",
    value: 128,
    color: "var(--vs-success)",
    polygons: [
      [
        [-3.2, 53.5],
        [-0.2, 53.2],
        [0.1, 54.6],
        [-1.6, 55.8],
        [-3, 55],
        [-3.2, 53.5],
      ],
    ],
  },
  {
    id: "midlands",
    label: "Midlands",
    value: 121,
    color: "var(--vs-info)",
    polygons: [
      [
        [-3, 52.2],
        [-1.2, 51.8],
        [0.2, 52.6],
        [-0.2, 53.2],
        [-2.4, 53.4],
        [-3, 52.2],
      ],
    ],
  },
  {
    id: "south-east",
    label: "South East",
    value: 98,
    color: "var(--vs-warning)",
    polygons: [
      [
        [-1.2, 50.7],
        [1.4, 51.2],
        [1.1, 52],
        [-0.4, 52.2],
        [-1.2, 51.8],
        [-1.2, 50.7],
      ],
    ],
  },
  {
    id: "south-west",
    label: "South West",
    value: 136,
    color: "var(--accent)",
    polygons: [
      [
        [-5.7, 50.1],
        [-3.8, 50.2],
        [-1.2, 50.7],
        [-1.2, 51.8],
        [-3, 52.2],
        [-5.3, 51.7],
        [-5.7, 50.1],
      ],
    ],
  },
  {
    id: "wales",
    label: "Wales",
    value: 118,
    color: "var(--vs-success)",
    polygons: [
      [
        [-5.3, 51.7],
        [-3, 52.2],
        [-3.2, 53.4],
        [-4.5, 52.8],
        [-5.3, 51.7],
      ],
    ],
  },
  {
    id: "northern-ireland",
    label: "Northern Ireland",
    value: 76,
    color: "var(--vs-warning)",
    polygons: [
      [
        [-8.2, 54],
        [-6.2, 54.1],
        [-5.6, 55],
        [-6.5, 55.5],
        [-7.9, 55.1],
        [-8.2, 54],
      ],
    ],
  },
] as const;
const geoPoints = [
  {
    longitude: -0.13,
    latitude: 51.51,
    value: 126,
    label: "London",
  },
  {
    longitude: -2.24,
    latitude: 53.48,
    value: 154,
    label: "Manchester",
  },
  {
    longitude: -1.89,
    latitude: 52.49,
    value: 139,
    label: "Birmingham",
  },
  {
    longitude: -2.59,
    latitude: 51.45,
    value: 148,
    label: "Bristol",
  },
  {
    longitude: -3.18,
    latitude: 51.48,
    value: 132,
    label: "Cardiff",
  },
  {
    longitude: -4.25,
    latitude: 55.86,
    value: 161,
    label: "Glasgow",
  },
  {
    longitude: -3.19,
    latitude: 55.95,
    value: 149,
    label: "Edinburgh",
  },
  {
    longitude: -5.93,
    latitude: 54.6,
    value: 84,
    label: "Belfast",
  },
  {
    longitude: -1.55,
    latitude: 53.8,
    value: 141,
    label: "Leeds",
  },
  {
    longitude: -2.99,
    latitude: 53.41,
    value: 136,
    label: "Liverpool",
  },
  {
    longitude: -1.62,
    latitude: 54.97,
    value: 118,
    label: "Newcastle",
  },
  {
    longitude: -1.47,
    latitude: 53.38,
    value: 129,
    label: "Sheffield",
  },
  {
    longitude: -1.15,
    latitude: 52.95,
    value: 122,
    label: "Nottingham",
  },
  {
    longitude: -1.4,
    latitude: 50.91,
    value: 111,
    label: "Southampton",
  },
  {
    longitude: -4.14,
    latitude: 50.37,
    value: 117,
    label: "Plymouth",
  },
  {
    longitude: -2.1,
    latitude: 57.15,
    value: 134,
    label: "Aberdeen",
  },
  {
    longitude: -3.94,
    latitude: 51.62,
    value: 125,
    label: "Swansea",
  },
  {
    longitude: -7.32,
    latitude: 55,
    value: 79,
    label: "Derry",
  },
];
 
export default function CustomProjectionMapDemo() {
  return (
    <CustomProjectionMap
      ariaLabel="Heat pump installations per 10,000 households across seven United Kingdom nations and regions and eighteen cities, 2026"
      features={ukFeatures}
      points={geoPoints} />
  );
}

Installation

API Reference

Import

import { CustomProjectionMap } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

Description

project

((longitude: number, latitude: number) => readonly [number, number]) | undefined

—

optional

—

features

readonly GeoFeature[] | undefined

—

optional

—

points

readonly GeoPoint[] | undefined

—

optional

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

ariaLabel

string | undefined

—

optional

—

Prop: project
Type: ((longitude: number, latitude: number) => readonly [number, number]) | undefined
Default: —
Requirement: optional
Description: —

Prop: features
Type: readonly GeoFeature[] | undefined
Default: —
Requirement: optional
Description: —

Prop: points
Type: readonly GeoPoint[] | undefined
Default: —
Requirement: optional
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: 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.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Prop: selectionMode
Type: SelectionMode | undefined
Default: —
Requirement: optional
Description: —

Prop: selectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultSelectedIds
Type: SelectionValue | undefined
Default: —
Requirement: optional
Description: —

Prop: onSelectedIdsChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`
`onSelectedIdsChange`	`((ids: readonly string[]) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { CustomProjectionMap } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: features
Type: readonly GeoFeature[] | undefined
Default: () => []
Requirement: optional

Prop: points
Type: readonly GeoPoint[] | undefined
Default: () => []
Requirement: optional

Prop: project
Type: ((longitude: number, latitude: number) => readonly [number, number]) | undefined
Default: defaultProject
Requirement: optional

Prop: selectionMode
Type: SelectionMode | undefined
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[] | undefined
Default: —
Requirement: optional

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`
`selectedIdsChange`	`[ids: readonly string[]]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootCustomProjectionMap } from "@grassroot/charts-angular";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: "none"
Requirement: optional

Prop: selectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: SelectionValue
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: SelectionValue) => void
Default: —
Requirement: optional

Prop: features
Type: readonly GeoFeature[]
Default: []
Requirement: optional

Prop: points
Type: readonly GeoPoint[]
Default: []
Requirement: optional

Prop: project
Type: (longitude: number, latitude: number) => readonly [number, number]
Default: defaultProject
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`
`selectedIdsChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { CustomProjectionMap } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

features

readonly GeoFeature[]

—

optional

points

readonly GeoPoint[]

—

optional

project

(longitude: number, latitude: number) => readonly [number, number]

—

optional

selectionMode

"none" | "single" | "multiple"

"none"

optional

selectedIds

readonly string[]

—

optional

defaultSelectedIds

readonly string[]

—

optional

onSelectedIdsChange

(ids: readonly string[]) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

Prop: features
Type: readonly GeoFeature[]
Default: —
Requirement: optional

Prop: points
Type: readonly GeoPoint[]
Default: —
Requirement: optional

Prop: project
Type: (longitude: number, latitude: number) => readonly [number, number]
Default: —
Requirement: optional

Prop: selectionMode
Type: "none" | "single" | "multiple"
Default: "none"
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onSelectedIdsChange`	`(ids: readonly string[]) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { CustomProjectionMap } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

features

readonly GeoFeature[]

—

optional

points

readonly GeoPoint[]

—

optional

project

(longitude: number, latitude: number) => readonly [number, number]

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

Prop: features
Type: readonly GeoFeature[]
Default: —
Requirement: optional

Prop: points
Type: readonly GeoPoint[]
Default: —
Requirement: optional

Prop: project
Type: (longitude: number, latitude: number) => readonly [number, number]
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: selectionMode
Type: SelectionMode
Default: —
Requirement: optional

Prop: selectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultSelectedIds
Type: readonly string[]
Default: —
Requirement: optional

Prop: onSelectedIdsChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onSelectedIdsChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary