CLI previewInstall commands shown on this site are not released yet.

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-map
bash
npx grassroot@latest add chart/albers-usa-map
bash
yarn dlx grassroot add chart/albers-usa-map
bash
bunx grassroot add chart/albers-usa-map

API Reference

AlbersUsaMapProps
PropTypeDefault
featuresreadonly GeoFeature[] | undefined
pointsreadonly GeoPoint[] | undefined
gpuBackendChartGpuBackend | undefined
widthnumber | undefined
heightnumber | undefined
renderPlanMode"svg" | "host" | undefined
rendererStrategyPartial<import("@grassroot/core").ChartRendererStrategy> | undefined
showGridboolean | undefined
legendboolean | import("@grassroot/interaction/core").LegendConfig | undefined
tooltipboolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
animationboolean | 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
hiddenSeriesreadonly string[] | undefined
defaultHiddenSeriesreadonly string[] | undefined
onHiddenSeriesChange((ids: readonly string[]) => void) | undefined
activeDatumstring | null | undefined
defaultActiveDatumUncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.string | null | undefined
onActiveDatumChange((id: string | null) => void) | undefined
rendererChartRenderer | undefined
classNamestring | undefined
themeimport("@grassroot/theme").PartialChartTheme | undefined
titlestring | undefined
descriptionstring | undefined
ariaLabelstring | undefined
keyboardNavigationboolean | undefined