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 Appearance​

Custom 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...

Custom Color​

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

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

Stroke Color​

You can also set a stroke color for your points by providing a strokeColor hex value or a strokeColor accessor function.

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

Stroke Width​

If you want to change the stroke width, you can use the strokeWidth property, which accepts a constant value or an accessor function.

<VisScatter
  x={x} 
  y={y} 
  color="none" 
  strokeColor="#DA348F" 
  strokeWidth={5}
/>
Loading...

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 Labels​

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 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="red"/>
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...

Label Text Brightness Ratio​

By default, labels with Position.Center will be assigned a 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} 
  labelPosition="center"
/>
Loading...

Overlapping Labels​

When there're overlapping labels, Scatter will hide some of them to avoid cluttering. You can see hidden labels by hobvering over the points. If you want to disable hiding overlapping labels, you can set the labelHideOverlapping property to false.

<VisScatter
  labelHideOverlapping={true} 
  x={x} 
  y={y} 
  size={10} 
  color={color} 
  label={label}
/>
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="crosshair"/>
Loading...

Events​

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

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: 'none';
--vis-scatter-stroke-width: 1px;
--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