@vx/text

@vx/text

npm install --save @vx/text

The @vx/text package contains components useful for adding labels to your graphs.

<TextOutline />

TextOutline can add an outline around your text to help it be more readable.

Example

import { TextOutline } from '@vx/text';

<TextOutline
  fontSize={10}
  x={x}
  y={y}
  dy={'.5em'}
  textAnchor={'end'}
  fill="black"
  outlineStroke={"white"}
  outlineStrokeWidth={3}
  fontFamily={"Roboto Mono"}
>
  {"Woo text!"}
</TextOutline>

Properties

Name	Default	Type	Description
x	0	number	The x coordinate position.
y	0	number	The y coordinate position.
dx	0	number	The x-offset.
dy	0	number	The y-offset.
fontSize	12	number	The fontSize for the text.
fontFamily	Arial	string	The fontFamily for the text.
fill	white	string	The fill color for the inner text.
stroke	none	string	The stroke color for the inner text.
strokeWidth	0	number	The strokeWidth for the inner text.
outlineFill	white	string	The fill color for the outline.
outlineStroke	magenta	string	The stroke color of the outline.
outlineStrokeWidth	3	number	The stroke width in pixels of the outline.
textAnchor	start	string	The svg textAnchor for the text.
className		string	A classname to be applied to both the inner and outer text.

Source For Components

• <TextOutline />
• :warning: <TextWrap />

Changelog

v0.0.127

• [boxplot] add @vx/boxplot #89
• [mock data] add genBoxPlot() #89
• [tooltip] fix pass through style and restProps #89
• [shape] fix BarStack.test.js #88

Changes:
- @vx/annotation: 0.0.126 => 0.0.127
- @vx/axis: 0.0.126 => 0.0.127
- @vx/boxplot: 1.0.0 => 0.0.127
- @vx/brush: 0.0.126 => 0.0.127
- @vx/clip-path: 0.0.126 => 0.0.127
- @vx/curve: 0.0.126 => 0.0.127
- @vx/demo: 0.0.126 => 0.0.127
- @vx/drag: 0.0.126 => 0.0.127
- @vx/event: 0.0.126 => 0.0.127
- @vx/glyph: 0.0.126 => 0.0.127
- @vx/gradient: 0.0.126 => 0.0.127
- @vx/grid: 0.0.126 => 0.0.127
- @vx/group: 0.0.126 => 0.0.127
- @vx/heatmap: 0.0.126 => 0.0.127
- @vx/hierarchy: 0.0.126 => 0.0.127
- @vx/legend: 0.0.126 => 0.0.127
- @vx/marker: 0.0.126 => 0.0.127
- @vx/mock-data: 0.0.126 => 0.0.127
- @vx/pattern: 0.0.126 => 0.0.127
- @vx/point: 0.0.126 => 0.0.127
- @vx/responsive: 0.0.126 => 0.0.127
- @vx/scale: 0.0.126 => 0.0.127
- @vx/shape: 0.0.126 => 0.0.127
- @vx/text: 0.0.126 => 0.0.127
- @vx/tooltip: 0.0.126 => 0.0.127
- @vx/voronoi: 0.0.126 => 0.0.127
- @vx/zoom: 0.0.126 => 0.0.127