@dashboardstack/charts-react

Higher-level React chart components built on top of the visx stack.

Dotted Map

DottedMap is a first-class component in this package. The implementation, map engine, presets, and helpers all live inside @dashboardstack/charts-react.

Example

import { DottedMap, createPin } from '@dashboardstack/charts-react/geo'

const pins = [
  createPin(52.3676, 4.9041, { city: 'Amsterdam', region: 'Europe' }),
  createPin(40.7128, -74.006, { city: 'New York', region: 'USA' })
]

const legend = [
  { label: 'Europe', color: '#0ea5e9' },
  { label: 'USA', color: '#f97316' }
]

export function Example() {
  return (
    <DottedMap
      regionName="world"
      pins={pins}
      legend={legend}
      maxHeight={420}
      showControls
    />
  )
}

Related Exports

• DottedMap
• DottedMapCore
• MapLegend
• createPin
• COUNTRIES, DEFAULT_ZOOM, REGIONS