Line
Component to connect coordinates, show routes, or illustrate data flows from one location to another on a mapchart using a geojson lineString. It can be specified as either a start and end point, or a set of coordinates.
import { Line } from "react-simple-maps"
js
Note that the line string will aim to use the shortest route possible to get from one point to the other. This means that if you connect two coordinates on opposing ends of a projection, the line might look strange, since it will not cross through the center of the map.
Example
The following example shows how to use lines to connect two points on a mapchart.
Coordinates
You can connect more than just two points at a time. Use the coordinates prop to pass a series of coordinates to visualize a path or route with multiple stops on a mapchart.
Line props
| Name | Type | Default |
|---|---|---|
| from | Array | [0, 0] |
| to | Array | [0, 0] |
| coordinates | Array | [] |
| stroke | String | currentcolor |
| strokeWidth | Number | 3 |
| fill | String | transparent |
