bare-minimum-text-marker v0.0.7
Bare minimum text marker
A plugin for bare-minimum-2d for plotting points with text labals.
How to use it
import BareMinimum2d from 'bare-minimum-2d'
import textMarker from 'bare-minimum-text-marker'
function Space() {
let points = [{
x: [496],
y: [1014],
label: 'Alpha Centauri',
id: 'alpha-cent',
type: 'textMarker',
size: 1,
opacity: 1,
color: 'white',
size: 2,
}]
return (
<BareMinimum2d
data={points}
plugins={[textMarker]}
/>
)
}Options
The following options can be used for a single point.
label
The text marker's text.
Default value: (empty sting)
pointer
Symbol used as a marker, that marks the position of the point. Make sure the character is available in your font.
Default value: •
yOffset
Vertical offset of the pointer to the datapoint. You might like to adjust that
to your fontFamily and Pointer.
Default value: size÷3
gap
Distance between the center of the pointer and the start of the label.
Default value: size÷2
fontFamily
font-family of both the pointer and the label
Default value: (empty sting) – user agent decides
color
fill color of both the pointer and the label
Default value: (empty string) – rendered as black
size
font-size of both the pointer and the label.
Default value: 16
opacity
Opacity of both the pointer and the label.
Default value: 1
Note that you'll still be able to apply css.
layout
Array of possible label layouts in order of priority. Each entry myst be one of
'north', 'east', 'south' or 'west'.
Example: ['north', 'east', 'south'] would mean:
- Try to place it north.
- If the space in the north is already occupied, try east.
- If the space in the east is occupied, try south.
- If the space in the south is occupied, don't show the label at all.
You might want to keep this array short for better performance.
Default value: ['east', 'west', 'south', 'north']
How to build the example
npm install && npm run build && cd example && npm install && npm run start