Hero

Track

The <Track> component renders the track line, spread, countries, and highlights. It is a SVG element, and extends from the origin (0,0) along the positive X-axis. To place the track at a specific position, wrap it inside a <g> element with an appropriate transform.

The track looks differently depending on the arrangement. In radial arrangement it's thinner, and the spread line has the dimension color. In horizontal arrangement it is thicker, and the spread line is white.

The track always shows the highlights, the individual countries are only shown on request.

arrangement=radial
arragement=radial; showCountries
arrangement=horizontal
arragement=horizontal; showCountries

Center

The <Center> component renders the labels in the center of the wheel. It is a HTML element, and requires that its transform origin is in the center of the wheel.

highlight1
highlight1 + highlight2

The background circle is rendered in SVG via the <BackgroundCircle> component! Here it's only shown for illustration to demonstrate how the labels fit into the standard center circle size (radius 96px).