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 Array
s of Number
s, String
s and Date
s, or Function
s that return Array
s 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 aNumber
is passed tofontWeight
, it must be number between 0 and 1000, where 1000 is the greatest possible weight. If aString
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 thestrokeOpacity
and thefillOpacity
(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 parentGraphic
,Section
orGlyph
.
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: