DocsChartsSpatial & maps
AlbersUsaMap
React example follows below.
ts
import { AlbersUsaMap } from "@grassroot/charts-react"; <AlbersUsaMap />ts
<script setup lang="ts">import { AlbersUsaMap } from "@grassroot/charts-vue";</script> <template> <AlbersUsaMap /></template>ts
import { ChangeDetectionStrategy, Component } from "@angular/core";import { GrassrootAlbersUsaMap } from "@grassroot/charts-angular"; @Component({ selector: "app-albers-usa-map-chart-demo", standalone: true, imports: [GrassrootAlbersUsaMap], changeDetection: ChangeDetectionStrategy.OnPush, template: `<grassroot-albers-usa-map />`,})export class AlbersUsaMapDemoComponent { } export default AlbersUsaMapDemoComponent;ts
<script lang="ts"> import { AlbersUsaMap } from "@grassroot/charts-svelte";</script> <AlbersUsaMap />ts
/** @jsxImportSource solid-js */import { AlbersUsaMap } from "@grassroot/charts-solid"; export default function AlbersUsaMapDemo() { return <AlbersUsaMap />;}Installation
bash
pnpm dlx grassroot add chart/albers-usa-mapbash
npx grassroot@latest add chart/albers-usa-mapbash
yarn dlx grassroot add chart/albers-usa-mapbash
bunx grassroot add chart/albers-usa-mapAPI Reference
| 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 | — |
interactiveGates 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 | — |
defaultActiveDatumUncontrolled 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 | — |