Charts · Fields & networks
ContourChart
Iso-lines and filled bands of a density or a grid. Family: Fields & networks · chart 57 of 60.
| density | band |
|---|
| density | band |
|---|
| density | band |
|---|
| density | band |
|---|
Example
The chart above, in each framework. Pick a framework once and every example on the site follows it.
npm install @silverpoint/react @silverpoint/grounds @silverpoint/fontsimport '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { ContourChart } from '@silverpoint/react/contour-chart';
const data = [
{ x: 18.48, y: 44.44 },
{ x: 38.26, y: 64.71 },
{ x: 39.92, y: 61.68 },
{ x: 38.71, y: 58.23 },
{ x: 42.91, y: 56.15 },
{ x: 47.49, y: 71.55 },
{ x: 26.68, y: 41.44 },
{ x: 31.44, y: 62.22 },
{ x: 32.33, y: 55.33 },
{ x: 44.8, y: 73.12 },
{ x: 25.8, y: 32.3 },
{ x: 33.77, y: 60.57 },
// … 1188 more rows of the same shape
];
export default function App() {
return (
<div style={{ width: 480 }}>
<ContourChart
data={data}
xKey="x"
yKey="y"
source="points"
title="Point density"
/>
</div>
);
}npm install @silverpoint/vue @silverpoint/grounds @silverpoint/fonts<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import { SpContourChart } from '@silverpoint/vue/contour-chart';
const data = [
{ x: 18.48, y: 44.44 },
{ x: 38.26, y: 64.71 },
{ x: 39.92, y: 61.68 },
{ x: 38.71, y: 58.23 },
{ x: 42.91, y: 56.15 },
{ x: 47.49, y: 71.55 },
{ x: 26.68, y: 41.44 },
{ x: 31.44, y: 62.22 },
{ x: 32.33, y: 55.33 },
{ x: 44.8, y: 73.12 },
{ x: 25.8, y: 32.3 },
{ x: 33.77, y: 60.57 },
// … 1188 more rows of the same shape
];
</script>
<template>
<div style="width: 480px">
<SpContourChart
:data="data"
x-key="x"
y-key="y"
source="points"
title="Point density"
/>
</div>
</template>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 { SpContourChart } from '@silverpoint/angular/contour-chart';
@Component({
selector: 'app-root',
imports: [SpContourChart],
template: `
<div style="width: 480px">
<sp-contour-chart
[data]="data"
xKey="x"
yKey="y"
source="points"
title="Point density"
/>
</div>
`,
})
export class App {
protected readonly data = [
{ x: 18.48, y: 44.44 },
{ x: 38.26, y: 64.71 },
{ x: 39.92, y: 61.68 },
{ x: 38.71, y: 58.23 },
{ x: 42.91, y: 56.15 },
{ x: 47.49, y: 71.55 },
{ x: 26.68, y: 41.44 },
{ x: 31.44, y: 62.22 },
{ x: 32.33, y: 55.33 },
{ x: 44.8, y: 73.12 },
{ x: 25.8, y: 32.3 },
{ x: 33.77, y: 60.57 },
// … 1188 more rows of the same shape
];
}pip install reflex-silverpoint-reactimport reflex as rx
from reflex_silverpoint_react import contour_chart
DATA = [
{"x": 18.48, "y": 44.44},
{"x": 38.26, "y": 64.71},
{"x": 39.92, "y": 61.68},
{"x": 38.71, "y": 58.23},
{"x": 42.91, "y": 56.15},
{"x": 47.49, "y": 71.55},
{"x": 26.68, "y": 41.44},
{"x": 31.44, "y": 62.22},
{"x": 32.33, "y": 55.33},
{"x": 44.8, "y": 73.12},
{"x": 25.8, "y": 32.3},
{"x": 33.77, "y": 60.57},
# … 1188 more rows of the same shape
]
def index() -> rx.Component:
return rx.box(
contour_chart(
data=DATA,
x_key="x",
y_key="y",
source="points",
title="Point density",
),
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 { ContourChart } from '@silverpoint/react/contour-chart'; |
| Vue | import { SpContourChart } from '@silverpoint/vue/contour-chart'; |
| Angular | import { SpContourChart } from '@silverpoint/angular/contour-chart'; // <sp-contour-chart> |
| Reflex | from reflex_silverpoint_react import contour_chart |
Props
The props ContourChart 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 |
|---|---|---|---|---|
source | source | source | 'points' | 'grid' | points estimates a density from a point cloud; grid reads a regular grid of values. |
xKey | x-key | x_key | Accessor<number | null | undefined> | — |
yKey | y-key | y_key | Accessor<number | null | undefined> | — |
valueKey | value-key | value_key | Accessor<number | null | undefined> | The grid value (source: 'grid'). |
levels | levels | levels | number | readonly number[] | A count of levels, or the thresholds, increasing: in the grid's values, or as shares of the density's peak. |
filled | filled | filled | boolean | Fills the bands between levels; true 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 | — |
Events
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(…) |
Report it
Found something wrong with ContourChart? Open an issue on GitHub — the form comes pre-filled with the chart and the version.