Label

The Label mark is used to plot text elements.

<script>
  import { Graphic, Label, LabelLayer, XAxis, YAxis } from '@snlab/florence'
</script>

<Graphic width={200} height={200} scaleX={[0, 10]} scaleY={[0, 10]} padding={20}>

  <Label x={2.5} y={2.5} text={'Hello'} />
  <LabelLayer x={[5, 7.5]} y={[5, 7.5]} text={['world', '!!!']} />

  <XAxis />
  <YAxis />

</Graphic>

Properties

Positioning

Prop	Required	Type(s)	Default	Unit(s)
x	`if (geometry === undefined)`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y	`if (geometry === undefined)`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
geometry	`if (x === undefined && y === undefined)`	GeoJSON Point feature	`undefined`	Local coordinate
anchorPoint	`false`	`String`	`'center'`	See explanation

To render a Label, you will need to provide either the x and y props, or the geometry prop. The two uses are mutually exclusive. The x and y coordinates, or the coordinates in the GeoJSON feature passed to geometry, control the anchor point of the text.

x and y can be of type Number, String and Date, depending on the scales used in the parent Section. geometry accepts GeoJSON Point features only. Coordinates inside the GeoJSON geometry will similarly be treated as unscaled. For all positioning props, a function can be supplied that bypasses the scaling step – see the local coordinates documentation. When using the LabelLayer, all positioning props will be supplied as Arrays of Numbers, Strings and Dates, or Functions that return Arrays of scaled coordinates- see the marks versus layers documentation.

The anchor point is by default in the center, but can be changed to with the anchorPoint prop. This value passed to the anchorPoint prop must be one of the following values:

'center'
'lb' (left-bottom)
'lt' (left-top)
'rt' (right-top)
'rb' (right-bottom)
'l' (left-center)
'r' (right-center)
't' (center-top)
'b' (center-bottom)

Aesthetics

Prop	Required	Types	Default	Unit(s)
text	`false`	`Number`, `String`	`undefined`	-
fontSize	`false`	`Number`	`16`	Pixel
fontWeight	`false`	`Number`, `String`	`'normal'`	See explanation
fontFamily	`false`	`String`	`'Helvetica'`	Name of font family
rotate	`false`	`Number`	`0`	Radian
fill	`false`	`String`	`'#000000'`	Named, hex, rgb, or hsl color
fillOpacity	`false`	`Number`	`undefined`	Number between 0 and 1
stroke	`false`	`String`	`'none'`	Named, hex, rgb, or hsl color
strokeWidth	`false`	`Number`	`0`	Pixel
strokeOpacity	`false`	`Number`	`undefined`	Number between 0 and 1
opacity	`false`	`Number`	`1`	Number between 0 and 1

These aesthetic props are similar to attributes of the SVG text element. The analogous text attributes are shown below in brackets:

text refers, unsurprisingly, to the label text (no direct equivalent, is passed to element slot)
fontSize refers to the font size (font-size)
fontWeight refers to the ‘thickness’ of the font, similar to using ‘bold’ text in regular text editors. If a Number is passed to fontWeight, it must be number between 0 and 1000, where 1000 is the greatest possible weight. If a String is passed instead, it must be a value like 'normal' or 'bold'. For more options: check the font-weight CSS property documentation, which uses the same API. (font-weight)
fontFamily refers to the font family (font-family)
rotate refers to the rotation of the text in radians. The text will rotate around the anchor point (no direct equivalent)
fill refers to the color of the text (fill)
fillOpacity refers to the opacity of the text, 0 being fully transparent (fill-opacity)
stroke refers to the color of the text’s outline (stroke)
strokeWidth refers to the thickness of the text’s outline (stroke-width)
strokeOpacity to the opacity of the text’s outline, 0 being fully transparent (stroke-opacity)
opacity sets both the strokeOpacity and the fillOpacity (opacity)

Interactions

Mouse events

Prop	Required	Type(s)	Default	Unit(s)
onClick	`false`	`Function`	`undefined`	-
onMousedown	`false`	`Function`	`undefined`	-
onMouseup	`false`	`Function`	`undefined`	-
onMouseover	`false`	`Function`	`undefined`	-
onMouseout	`false`	`Function`	`undefined`	-
onMousedrag	`false`	`Function`	`undefined`	-

Touch events

Prop	Required	Type(s)	Default	Unit(s)
onTouchdown	`false`	`Function`	`undefined`	-
onTouchup	`false`	`Function`	`undefined`	-
onTouchover	`false`	`Function`	`undefined`	-
onTouchout	`false`	`Function`	`undefined`	-
onTouchdrag	`false`	`Function`	`undefined`	-

Select events

Prop	Required	Type(s)	Default	Unit(s)
onSelect	`false`	`Function`	`undefined`	-
onDeselect	`false`	`Function`	`undefined`	-

See the interactivity documentation for more information.

Other

Prop	Required	Type(s)	Default	Unit(s)
outputSettings	`false`	`Object`	`undefined`	-
blockReindexing	`false`	`Boolean`	`false`	-
clip	`false`	`String`, `undefined`	`undefined`	Either `'padding'`, `'outer'` or `undefined`

outputSettings: see the advanced rendering documentation for more information.
blockReindexing: see the interactivity documentation for more information.
clip: if defined, overrides the clip mode of the parent Graphic, Section or Glyph.

In addition, the LabelLayer has the keys prop:

Prop	Required	Type(s)	Default	Unit(s)
keys	`false`	`String[]`	`undefined`	Array of unique keys

See the marks versus layers documentation for more information on how keys work.

Examples

The Label and LabelLayer can be seen in action in the following examples: