# GlobeChart

> The world as a globe (orthographic projection) you turn with the pointer or the arrow keys.

Source: https://ui.jcsoftdev.com/docs/components/globe-chart

The world as a globe (orthographic projection) you turn with the pointer or the arrow keys.
Regions can be colored by value, markers sized by value and great-circle routes drawn over the
surface. It fills its container as a disc, adapts to any width and keeps every interaction
available without a pointer.

## Import

```ts
import { GlobeChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/globe-chart`.

## Usage

```tsx
<GlobeChart
  title="Pedidos por país"
  map={worldMap}
  data={orders}
  valueName="Pedidos"
  valueFormat="integer"
  scale="sequential"
  graticule
  graticuleStep={30}
  autoRotate={false}
  autoRotateSpeed={8}
  legend
  tooltip
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `map` * | `GeoMap` |  | Land to draw, e.g. `worldMap` from `@jcsoftdev/ui/charts/maps/data/world`. |
| `data` | `readonly ChoroplethDatum[]` | `[]` | Value per region (id or name); fills the land with a color scale. |
| `scale` | `"sequential" \| "diverging"` | `"sequential"` |  |
| `domain` | `readonly [number, number]` |  |  |
| `center` | `number` | `0` |  |
| `colors` | `ScaleColors` |  |  |
| `ranges` | `readonly ColorRange[]` |  |  |
| `valueFormat` | `ValueFormat` |  |  |
| `valueName` | `string` |  | Name of the value in the tooltip and the data table. |
| `points` | `readonly MapPoint[]` | `[]` | Markers on the surface, area-proportional when they carry a `value`. |
| `routes` | `readonly MapRoute[]` | `[]` | Great-circle arcs between places, lifted a little over the surface. |
| `minRadius` | `number` | `4` |  |
| `maxRadius` | `number` | `16` |  |
| `graticule` | `boolean` | `true` | Meridians and parallels. |
| `graticuleStep` | `number` | `30` | Degrees between graticule lines (30 by default). |
| `initialRotation` | `GlobeRotation` | `ROTATION_DEFAULT` | View center when the user has not turned the globe yet. Lima by default. |
| `rotation` | `GlobeRotation` |  | Controlled view center; combine with `onRotationChange`. |
| `onRotationChange` | `((rotation: GlobeRotation) => void)` |  |  |
| `autoRotate` | `boolean` | `false` | Slow idle spin that pauses while the pointer or focus is on the globe. Off under reduced motion. |
| `autoRotateSpeed` | `number` | `8` | Degrees per second of the idle spin. |
| `height` | `number \| "fill"` |  |  |
| `aspectRatio` | `number` |  |  |
| `legend` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `dataTable` | `"hidden"` |  | The numbers as a screen-reader table (always hidden visually). |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<GlobeLabels>` |  |  |
| `onRegionClick` | `((region: { id: string; name: string; value: number \| null; }) => void)` |  |  |
| `onPointClick` | `((point: MapPoint) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-globechart--default)
- [Markers And Routes](/storybook/?path=/story/charts-globechart--markers-and-routes)
- [Auto Rotate](/storybook/?path=/story/charts-globechart--auto-rotate)
- [Narrow](/storybook/?path=/story/charts-globechart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-globechart--fill-parent)
- [Brutal Preset](/storybook/?path=/story/charts-globechart--brutal-preset)
- [Controlled](/storybook/?path=/story/charts-globechart--controlled)
- [Loading](/storybook/?path=/story/charts-globechart--loading)
- [Empty](/storybook/?path=/story/charts-globechart--empty)

## Source

`packages/ui/src/charts/globe-chart/globe-chart.tsx`