GeographicGenerated from the public API

GeoTrajectoryChart

Plot positions and routes on a plane whose bounds and coordinate meaning you declare.

@luc/ui/charts

What it shows

Show one or more routes on a map, including a path that crosses the antimeridian.

Live preview

Two supplied routes; the second crosses the antimeridian and is unwrapped for drawing only.

<GeoTrajectoryChart
  trajectories={routes}
  xLabel="Longitude"
  yLabel="Latitude"
  format={{ kind: "number", decimals: 1 }}
  ariaLabel="Two routes"
/>

Usage

The values are prepared by the caller: this component draws the points it is given and computes no statistic of its own, so units, scaling and any summary have to be settled before the data reaches it.

It is drawn by the ECharts engine.

Worked examples with real data are on the family overview: Geographic

import { GeoTrajectoryChart } from "@luc/ui/charts";

<GeoTrajectoryChart
  trajectories={routes}
  xLabel="Longitude"
  yLabel="Latitude"
  format={{ kind: "number", decimals: 1 }}
  ariaLabel="Two routes"
/>

Data contract

`trajectories` supply ordered route points in the map's coordinate system; `xLabel` and `yLabel` name the plane. The chart unwraps crossing paths for drawing only.

Important configuration

State the coordinate system and map registration, format both axes, and keep route point order as the travelled sequence.

Guidelines

When not to use

Do not read the drawn crossing as a straight-line distance or use an unregistered coordinate system without declaring its bounds.

Configuration

Exported symbols
Export	Kind	Signature
`GeoTrajectoryChart`	15 documented props	`({ trajectories, unwrap, xLabel, yLabel, format, title, description, state, height, className, ariaLabel, ariaDescription, onReady, onEvent, eager, }: GeoTrajectoryChartProps) => import("@types/react…`