Skip to main content

Scatter

Basic configuration

The Scatter component has been designed to work together with XYContainer. The minimal Scatter configuration looks like:

component.tsx
import { VisXYContainer, VisScatter } from '@unovis/react'

function Component(props) {
const data: DataRecord[] = props.data
const x = (d: DataRecord) => d.x
const y = (d: DataRecord) => d.y

return (
<VisXYContainer data={data}>
<VisScatter x={x} y={y}/>
</VisXYContainer>
)
}
Loading...

Point Shape

You can change the point's symbol using the symbol attribute, which accepts a SymbolType or a corresponding string ('circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye' ) or a function (executed per data point) that returns either of them.

<VisScatter x={x} y={y} shape="wye"/>
Loading...

Point Color

You can provide Scatter with a single color hex value or a color accessor function.

<VisScatter x={x} y={y} color="#DA348F"/>
Loading...

Point Size and Size Range

You can use the size property to set the point size (i.e. point diameter if shape is set to SymbolType.Circle) in pixels by providing a constant value or an accessor function, e.g.: d => d.size.

<VisScatter x={x} y={y} size={50}/>
Loading...

Scatter's sizeRange attribute represents a range of numbers for a point's size. When sizeRange is set, the size property will be treated as relative and all the points will be rescaled according to the provided range.

In tha case if you provide a constant value to size, every resulting size value will be the median of sizeRange. Fox example, if sizeRange is set to [10,50], that will make the default size equal to 30px (or (min + max)/2).

<VisScatter x={x} y={y} size={size} sizeRange={[10,50]}/>
Loading...

Point Label

You can also place labels on Scatter's points by passing a string accessor function to the label property.

<VisScatter x={x} y={y} size={20} label={label}/>
Loading...

Label Text Brightness Ratio

By default, the Scatter component will assign label color based on the point's shade with the labelTextBrightnessRatio property. It accepts any value between 0 and 1 (inclusive).

The default setting 0.65 creates darker text on light backgrounds and light text on dark backgrounds. See how the contrast differs in the following examples, when we assign more extreme values to the labelTextBrightnessRatio property:

<VisScatter
labelTextBrightnessRatio={0.65}
x={x}
y={y}
size={20}
color={color}
label={label}
/>
Loading...

Label Color

You can also configure a custom color for your labels by providing the labelColor attribute with a color accessor method or string. Note that setting this property overrides labelTextBrightnessRatio.

<VisScatter x={x} y={y} size={20} label={label} labelColor="yellow"/>
Loading...

Label Position

You can change a point's label position with the labelPosition property, which accepts a Position or Position accessor function. Supported values are Position.Center, Position.Bottom (default), Position.Left, Position.Right and Position.Top

<VisScatter labelPosition="bottom" x={x} y={y}/>
Loading...

Custom Cursor

Scatter also allows to set a custom cursor when hovering over a point by providing a cursor accessor function.

<VisScatter x={x} y={y} cursor={cursor}/>
Loading...

Events

import { Scatter } from '@unovis/ts`
...
events = {
[Scatter.selectors.point]: {
click: (d: DataRecord) => {},
...
},
}
<VisScatter x={x} y={y} events={events}/>

Additional Styling: CSS Variables

The Scatter component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css
.custom-vis {
--vis-scatter-fill-opacity: 0.5;
--vis-scatter-stroke-width: 1;
--vis-scatter-hover-stroke-width: 2;
--vis-scatter-point-label-text-color-dark: darkblue;
}
Loading...
Supported CSS variables and their default values

--vis-scatter-cursor: default;
--vis-scatter-fill-color: var(--vis-color-main);
--vis-scatter-stroke-color: var(--vis-color-main);
--vis-scatter-stroke-width: 0px;
--vis-scatter-fill-opacity: 1;
--vis-scatter-stroke-opacity: 1;
--vis-scatter-hover-stroke-width: 2px;
 
--vis-scatter-point-label-text-color-dark: #5b5f6d;
--vis-scatter-point-label-text-color-light: #fff;
--vis-scatter-point-label-text-font-weight: 500;
--vis-scatter-point-label-text-font-size: 12px;
--vis-scatter-point-label-text-font-family

Component Props

NameTypeDescription
* required property