Drawing Labels

Props

Name	Type	Default	Description
text	string	none	The text of the label.
position	PossibleVector2	[0,0]	The position of the label. Relative to the label's center.
color	string	#000	The color of the label.
size	"small"|"normal"|"large"	normal	The size of the label.
rotation	number	0	The counter-clockwise rotation of the label in degrees.
border	boolean	true	Whether the label should be drawn with a border.

Examples

Basic Label

Code

<template>
  <Graph :units="false">
    <Label :position="[2, 3]" text="Hello, World!" />
  </Graph>
</template>

Different sizes

Code

<template>
  <Graph :units="false" :grid="false" :axis="false">
    <Label :position="[0, 2]" text="Small" size="small" />
    <Label :position="[0, 0]" text="Normal" size="normal" />
    <Label :position="[0, -2]" text="Large" size="large" />
  </Graph>
</template>

Custom colors

Code

<template>
  <Graph :units="false" :grid="false" :axis="false">
    <Label :position="[0, 2]" text="Hot Pink!" color="hotpink" />
    <Label :position="[0, 0]" text="Light Sea Green!" color="lightseagreen" />
    <Label :position="[0, -2]" text="Dark Slate Blue!" color="darkslateblue" />
  </Graph>
</template>

Rotated Label

Code

<template>
  <Graph :units="false" :grid="false" :axis="false">
    <Label :position="[0, 2]" text="30° rotation!" :rotation="30" />
  </Graph>
</template>

Label Without Border

Code

<template>
  <Graph :units="false" :grid="false" :axis="false">
    <Label text="Just Text" :border="false" />
  </Graph>
</template>