Charts · Hierarchies & dimensions

PolarScatterChart

Points over angle and radius. Family: Hierarchies & dimensions · chart 55 of 60.

Sightings
bearing	distance
28	2.5
149.6	1.4
229.3	19.6
15.5	1.6
130.5	16.6
250.7	7
348.7	2.6
115.9	16.3
242.6	3.8
39.1	2.3
136.4	1.6
243.8	1.7
26.8	2.2
132.6	4.6
260.3	6.5
0.3	13.4
130	2
241.4	13.4
10.2	3
121.9	1.4
279.5	8.1
28.3	4.4
116.7	3.5
201.4	2.9
7.7	1.7
106.7	1
279.8	5.8
348.5	4.8
136.8	8
259.4	12.2
344.1	3.5
139.9	3.9
241.5	11.7
359.7	5.3
117.4	5.3
272	1.9
355.2	5.2
103.6	2
271.4	3.5
25	6.3
120.3	1.9
277.2	8
13.8	11.4
138.6	2.5
255.4	4.1
14.4	3.4
135.8	4.2
242.7	11.6
20.5	2.4
113.3	1.2
248.6	12.8
3.8	8
129.6	1.3
214.4	3.8
20.8	3.4
135.3	3.3
244.8	1.4
2.8	3.1
128.1	0.9
219.5	4.2
3.5	5.4
138.4	17.1
246.4	3.2
345.8	6.3
141.1	3.4
262.5	6.6
356.7	4.8
154.3	3.5
237.3	2.6
23.5	6.1
136.7	3.4
242.9	2.3
0.8	4.1
94.1	6.5
253.1	1.1
346.2	6.7
137.3	2.6
258	7.2
1.5	3.4
140.7	4.5
226.8	4
4.2	1.2
114.4	5
247.3	3.9
34.7	14.8
125.9	6
231.7	12
31.6	3
131.9	3.1
242	3.9
5.2	1.5
130.1	13.1
260.9	2.5
334.1	7.7
159.8	13.9
252.2	12.1
18.4	5.3
115	6.6
259.5	0.7
357.6	4.6
157.5	3.7
224.4	2.9
23.9	1.9
127.8	10.5
221.4	1.8
345.5	2.5
110.7	0.9
253.7	2.6
9.8	14.9
125.6	3.4
264.6	3.1
333	1.4
132.9	9
230.3	1.9
4.4	8.2
122.8	3.2
277.7	1.2
3.6	1.4
133.9	3.1
231.6	1.1
8.6	3.4
112.6	9.2
250.7	2.4
4.5	8.1
125.2	1
246.6	3.5
338.9	5.4
121.7	6.3
273.2	3
1.9	10.2
122.1	5.7
258.2	3.9
10.1	5.7
163.7	10.7
222.6	3.5
329.1	3.5
160.5	5.1
228.5	3.9
356	1.9
94.4	1.5
255.2	7.6
347.7	2.5
144.5	1.7
258.2	4.4
19.8	12
151.7	4.4
266	2.8
0.9	5.1
145.4	3.5
250.4	2.5

Report an issue with this chart

Sightings
bearing	distance
28	2.5
149.6	1.4
229.3	19.6
15.5	1.6
130.5	16.6
250.7	7
348.7	2.6
115.9	16.3
242.6	3.8
39.1	2.3
136.4	1.6
243.8	1.7
26.8	2.2
132.6	4.6
260.3	6.5
0.3	13.4
130	2
241.4	13.4
10.2	3
121.9	1.4
279.5	8.1
28.3	4.4
116.7	3.5
201.4	2.9
7.7	1.7
106.7	1
279.8	5.8
348.5	4.8
136.8	8
259.4	12.2
344.1	3.5
139.9	3.9
241.5	11.7
359.7	5.3
117.4	5.3
272	1.9
355.2	5.2
103.6	2
271.4	3.5
25	6.3
120.3	1.9
277.2	8
13.8	11.4
138.6	2.5
255.4	4.1
14.4	3.4
135.8	4.2
242.7	11.6
20.5	2.4
113.3	1.2
248.6	12.8
3.8	8
129.6	1.3
214.4	3.8
20.8	3.4
135.3	3.3
244.8	1.4
2.8	3.1
128.1	0.9
219.5	4.2
3.5	5.4
138.4	17.1
246.4	3.2
345.8	6.3
141.1	3.4
262.5	6.6
356.7	4.8
154.3	3.5
237.3	2.6
23.5	6.1
136.7	3.4
242.9	2.3
0.8	4.1
94.1	6.5
253.1	1.1
346.2	6.7
137.3	2.6
258	7.2
1.5	3.4
140.7	4.5
226.8	4
4.2	1.2
114.4	5
247.3	3.9
34.7	14.8
125.9	6
231.7	12
31.6	3
131.9	3.1
242	3.9
5.2	1.5
130.1	13.1
260.9	2.5
334.1	7.7
159.8	13.9
252.2	12.1
18.4	5.3
115	6.6
259.5	0.7
357.6	4.6
157.5	3.7
224.4	2.9
23.9	1.9
127.8	10.5
221.4	1.8
345.5	2.5
110.7	0.9
253.7	2.6
9.8	14.9
125.6	3.4
264.6	3.1
333	1.4
132.9	9
230.3	1.9
4.4	8.2
122.8	3.2
277.7	1.2
3.6	1.4
133.9	3.1
231.6	1.1
8.6	3.4
112.6	9.2
250.7	2.4
4.5	8.1
125.2	1
246.6	3.5
338.9	5.4
121.7	6.3
273.2	3
1.9	10.2
122.1	5.7
258.2	3.9
10.1	5.7
163.7	10.7
222.6	3.5
329.1	3.5
160.5	5.1
228.5	3.9
356	1.9
94.4	1.5
255.2	7.6
347.7	2.5
144.5	1.7
258.2	4.4
19.8	12
151.7	4.4
266	2.8
0.9	5.1
145.4	3.5
250.4	2.5

mode="precision"

Sightings
bearing	distance
28	2.5
149.6	1.4
229.3	19.6
15.5	1.6
130.5	16.6
250.7	7
348.7	2.6
115.9	16.3
242.6	3.8
39.1	2.3
136.4	1.6
243.8	1.7
26.8	2.2
132.6	4.6
260.3	6.5
0.3	13.4
130	2
241.4	13.4
10.2	3
121.9	1.4
279.5	8.1
28.3	4.4
116.7	3.5
201.4	2.9
7.7	1.7
106.7	1
279.8	5.8
348.5	4.8
136.8	8
259.4	12.2
344.1	3.5
139.9	3.9
241.5	11.7
359.7	5.3
117.4	5.3
272	1.9
355.2	5.2
103.6	2
271.4	3.5
25	6.3
120.3	1.9
277.2	8
13.8	11.4
138.6	2.5
255.4	4.1
14.4	3.4
135.8	4.2
242.7	11.6
20.5	2.4
113.3	1.2
248.6	12.8
3.8	8
129.6	1.3
214.4	3.8
20.8	3.4
135.3	3.3
244.8	1.4
2.8	3.1
128.1	0.9
219.5	4.2
3.5	5.4
138.4	17.1
246.4	3.2
345.8	6.3
141.1	3.4
262.5	6.6
356.7	4.8
154.3	3.5
237.3	2.6
23.5	6.1
136.7	3.4
242.9	2.3
0.8	4.1
94.1	6.5
253.1	1.1
346.2	6.7
137.3	2.6
258	7.2
1.5	3.4
140.7	4.5
226.8	4
4.2	1.2
114.4	5
247.3	3.9
34.7	14.8
125.9	6
231.7	12
31.6	3
131.9	3.1
242	3.9
5.2	1.5
130.1	13.1
260.9	2.5
334.1	7.7
159.8	13.9
252.2	12.1
18.4	5.3
115	6.6
259.5	0.7
357.6	4.6
157.5	3.7
224.4	2.9
23.9	1.9
127.8	10.5
221.4	1.8
345.5	2.5
110.7	0.9
253.7	2.6
9.8	14.9
125.6	3.4
264.6	3.1
333	1.4
132.9	9
230.3	1.9
4.4	8.2
122.8	3.2
277.7	1.2
3.6	1.4
133.9	3.1
231.6	1.1
8.6	3.4
112.6	9.2
250.7	2.4
4.5	8.1
125.2	1
246.6	3.5
338.9	5.4
121.7	6.3
273.2	3
1.9	10.2
122.1	5.7
258.2	3.9
10.1	5.7
163.7	10.7
222.6	3.5
329.1	3.5
160.5	5.1
228.5	3.9
356	1.9
94.4	1.5
255.2	7.6
347.7	2.5
144.5	1.7
258.2	4.4
19.8	12
151.7	4.4
266	2.8
0.9	5.1
145.4	3.5
250.4	2.5

substrate="green"

Sightings
bearing	distance
28	2.5
149.6	1.4
229.3	19.6
15.5	1.6
130.5	16.6
250.7	7
348.7	2.6
115.9	16.3
242.6	3.8
39.1	2.3
136.4	1.6
243.8	1.7
26.8	2.2
132.6	4.6
260.3	6.5
0.3	13.4
130	2
241.4	13.4
10.2	3
121.9	1.4
279.5	8.1
28.3	4.4
116.7	3.5
201.4	2.9
7.7	1.7
106.7	1
279.8	5.8
348.5	4.8
136.8	8
259.4	12.2
344.1	3.5
139.9	3.9
241.5	11.7
359.7	5.3
117.4	5.3
272	1.9
355.2	5.2
103.6	2
271.4	3.5
25	6.3
120.3	1.9
277.2	8
13.8	11.4
138.6	2.5
255.4	4.1
14.4	3.4
135.8	4.2
242.7	11.6
20.5	2.4
113.3	1.2
248.6	12.8
3.8	8
129.6	1.3
214.4	3.8
20.8	3.4
135.3	3.3
244.8	1.4
2.8	3.1
128.1	0.9
219.5	4.2
3.5	5.4
138.4	17.1
246.4	3.2
345.8	6.3
141.1	3.4
262.5	6.6
356.7	4.8
154.3	3.5
237.3	2.6
23.5	6.1
136.7	3.4
242.9	2.3
0.8	4.1
94.1	6.5
253.1	1.1
346.2	6.7
137.3	2.6
258	7.2
1.5	3.4
140.7	4.5
226.8	4
4.2	1.2
114.4	5
247.3	3.9
34.7	14.8
125.9	6
231.7	12
31.6	3
131.9	3.1
242	3.9
5.2	1.5
130.1	13.1
260.9	2.5
334.1	7.7
159.8	13.9
252.2	12.1
18.4	5.3
115	6.6
259.5	0.7
357.6	4.6
157.5	3.7
224.4	2.9
23.9	1.9
127.8	10.5
221.4	1.8
345.5	2.5
110.7	0.9
253.7	2.6
9.8	14.9
125.6	3.4
264.6	3.1
333	1.4
132.9	9
230.3	1.9
4.4	8.2
122.8	3.2
277.7	1.2
3.6	1.4
133.9	3.1
231.6	1.1
8.6	3.4
112.6	9.2
250.7	2.4
4.5	8.1
125.2	1
246.6	3.5
338.9	5.4
121.7	6.3
273.2	3
1.9	10.2
122.1	5.7
258.2	3.9
10.1	5.7
163.7	10.7
222.6	3.5
329.1	3.5
160.5	5.1
228.5	3.9
356	1.9
94.4	1.5
255.2	7.6
347.7	2.5
144.5	1.7
258.2	4.4
19.8	12
151.7	4.4
266	2.8
0.9	5.1
145.4	3.5
250.4	2.5

ground="cyanotype"

Example

The chart above, in each framework. Pick a framework once and every example on the site follows it.

shell

npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { PolarScatterChart } from '@silverpoint/react/polar-scatter-chart';

const data = [
  { bearing: 28, distance: 2.5 },
  { bearing: 149.6, distance: 1.4 },
  { bearing: 229.3, distance: 19.6 },
  { bearing: 15.5, distance: 1.6 },
  { bearing: 130.5, distance: 16.6 },
  { bearing: 250.7, distance: 7 },
  { bearing: 348.7, distance: 2.6 },
  { bearing: 115.9, distance: 16.3 },
  { bearing: 242.6, distance: 3.8 },
  { bearing: 39.1, distance: 2.3 },
  { bearing: 136.4, distance: 1.6 },
  { bearing: 243.8, distance: 1.7 },
  // … 138 more rows of the same shape
];

export default function App() {
  return (
    <div style={{ width: 480 }}>
      <PolarScatterChart
        data={data}
        angleKey="bearing"
        radiusKey="distance"
        title="Sightings"
        unit="km"
      />
    </div>
  );
}

shell

npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpPolarScatterChart } from '@silverpoint/vue/polar-scatter-chart';

const data = [
  { bearing: 28, distance: 2.5 },
  { bearing: 149.6, distance: 1.4 },
  { bearing: 229.3, distance: 19.6 },
  { bearing: 15.5, distance: 1.6 },
  { bearing: 130.5, distance: 16.6 },
  { bearing: 250.7, distance: 7 },
  { bearing: 348.7, distance: 2.6 },
  { bearing: 115.9, distance: 16.3 },
  { bearing: 242.6, distance: 3.8 },
  { bearing: 39.1, distance: 2.3 },
  { bearing: 136.4, distance: 1.6 },
  { bearing: 243.8, distance: 1.7 },
  // … 138 more rows of the same shape
];
</script>

<template>
  <div style="width: 480px">
    <SpPolarScatterChart
      :data="data"
      angle-key="bearing"
      radius-key="distance"
      title="Sightings"
      unit="km"
    />
  </div>
</template>

shell

npm install @silverpoint/angular @silverpoint/grounds @silverpoint/fonts

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';

import { Component } from '@angular/core';
import { SpPolarScatterChart } from '@silverpoint/angular/polar-scatter-chart';

@Component({
  selector: 'app-root',
  imports: [SpPolarScatterChart],
  template: `
    <div style="width: 480px">
      <sp-polar-scatter-chart
        [data]="data"
        angleKey="bearing"
        radiusKey="distance"
        title="Sightings"
        unit="km"
      />
    </div>
  `,
})
export class App {
  protected readonly data = [
    { bearing: 28, distance: 2.5 },
    { bearing: 149.6, distance: 1.4 },
    { bearing: 229.3, distance: 19.6 },
    { bearing: 15.5, distance: 1.6 },
    { bearing: 130.5, distance: 16.6 },
    { bearing: 250.7, distance: 7 },
    { bearing: 348.7, distance: 2.6 },
    { bearing: 115.9, distance: 16.3 },
    { bearing: 242.6, distance: 3.8 },
    { bearing: 39.1, distance: 2.3 },
    { bearing: 136.4, distance: 1.6 },
    { bearing: 243.8, distance: 1.7 },
    // … 138 more rows of the same shape
  ];
}

shell

pip install reflex-silverpoint-react

python

import reflex as rx
from reflex_silverpoint_react import polar_scatter_chart

DATA = [
    {"bearing": 28, "distance": 2.5},
    {"bearing": 149.6, "distance": 1.4},
    {"bearing": 229.3, "distance": 19.6},
    {"bearing": 15.5, "distance": 1.6},
    {"bearing": 130.5, "distance": 16.6},
    {"bearing": 250.7, "distance": 7},
    {"bearing": 348.7, "distance": 2.6},
    {"bearing": 115.9, "distance": 16.3},
    {"bearing": 242.6, "distance": 3.8},
    {"bearing": 39.1, "distance": 2.3},
    {"bearing": 136.4, "distance": 1.6},
    {"bearing": 243.8, "distance": 1.7},
    # … 138 more rows of the same shape
]


def index() -> rx.Component:
    return rx.box(
        polar_scatter_chart(
            data=DATA,
            angle_key="bearing",
            radius_key="distance",
            title="Sightings",
            unit="km",
        ),
        width="480px",
    )


app = rx.App()
app.add_page(index)

Import

Each chart has its own subpath, so a bundle only carries the charts it uses. Every adapter also exports every chart from its barrel.

Framework	Import
React	`import { PolarScatterChart } from '@silverpoint/react/polar-scatter-chart';`
Vue	`import { SpPolarScatterChart } from '@silverpoint/vue/polar-scatter-chart';`
Angular	`import { SpPolarScatterChart } from '@silverpoint/angular/polar-scatter-chart'; // <sp-polar-scatter-chart>`
Reflex	`from reflex_silverpoint_react import polar_scatter_chart`

Props

The props PolarScatterChart adds to the ones every chart takes. Accessor props (…Key, keys, names) name fields of your rows and are ignored without data.

React / Angular	Vue	Reflex	Type	Description
`angleKey`	`angle-key`	`angle_key`	`Accessor<number \| null \| undefined>`	In the units of `period`.
`radiusKey`	`radius-key`	`radius_key`	`Accessor<number \| null \| undefined>`	The radius, `≥ 0`.
`sizeKey`	`size-key`	`size_key`	`Accessor<number \| null \| undefined>`	—
`period`	`period`	`period`	`number`	One turn, in the units of the angle; 360 by default.

Common props

Every chart also takes these. Framework conventions: camelCase in React and Angular, kebab-case in Vue templates, snake_case in Reflex. Read more about them.

Show the 22 common props

React / Angular	Vue	Reflex	Type	Description
`data`	`data`	`data`	`readonly Datum[]`	Rows to draw. If omitted, the demo dataset is rendered (REQ-093) and the accessor props (`…_key`, `keys`, `names`) are ignored.
`ground`	`ground`	`ground`	`GroundRef`	Style ground: `silverpoint` or `cyanotype`, or a ground object. Defaults to the app provider's, or `silverpoint`.
`substrate`	`substrate`	`substrate`	`SubstrateName`	Prepared substrate within the ground (REQ-046).
`mode`	`mode`	`mode`	`InkMode`	`ink` by default; `precision` disables inking (REQ-021).
`seed`	`seed`	`seed`	`Seed`	Seed. If omitted, it is derived from `id` stably (REQ-003).
`id`	`id`	`id`	`string`	Stable identifier. If omitted, it is generated deterministically.
`height`	`height`	`height`	`number`	Height of the drawing area in px. Width is the container's unless pinned.
`width`	`width`	`width`	`number`	—
`chrome`	`chrome`	`chrome`	`'card' \| 'bare'`	`card` draws the full frame; `bare` only the drawing area (REQ-095).
`hatchFill`	`hatch-fill`	`hatch_fill`	`'tile' \| 'per-shape'`	How areas are filled (REQ-029).
`title`	`title`	`title`	`string`	—
`badge`	`badge`	`badge`	`string`	—
`value`	`value`	`value`	`string \| number`	—
`unit`	`unit`	`unit`	`string`	—
`footerLeft`	`footer-left`	`footer_left`	`string`	—
`footerRight`	`footer-right`	`footer_right`	`string`	—
`label`	`label`	`label`	`string`	Accessible name. If omitted, it is derived from `title` (REQ-120).
`description`	`description`	`description`	`string`	Long description for screen readers (REQ-120).
`dataTable`	`data-table`	`data_table`	`'visible' \| 'hidden' \| 'none'`	Tabular alternative; `hidden` leaves it for assistive technology only (REQ-121).
`locale`	`locale`	`locale`	`string`	—
`numberFormat`	`number-format`	`number_format`	`Intl.NumberFormatOptions`	—
`className`	`class-name`	`class_name`	`string`	—

Pointer and keyboard exploration are built in. The item under the pointer or focus is reported, and a click, Enter or Space selects it. The item is { seriesKey, index, datum, value, point: { x, y } }.

Framework	Active item	Selection	Custom readout
React	`onActiveChange`	`onSelect`	`tooltip={(item, readout) => …}`
Vue	`@active-change`	`@select`	`<template #tooltip>`
Angular	`(activeChange)`	`(select)`	`<ng-template spTooltip>`
Reflex	`on_active_change`	`on_select`	`tooltip=tooltip_template(…)`

Interaction and readouts →

Report it

Found something wrong with PolarScatterChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.

PolarScatterChart

Example

Import

Props

Common props

Events