@vx/glyph
npm install --save @vx/glyph
Glyphs are small icons that you can use in your graphs. Some elements, like LinePath
, can take a function that returns a glyph.
For example:
import { LinePath } from '@vx/shape';
import { GlyphDot } from '@vx/glyph';
let line = (
<LinePath
...
glyph={(d, i) => {
return (
<GlyphDot
className={"glyph-dots"}
key={'line-dot-{i}'}
cx={xScale(x(d))}
cy={yScale(y(d))}
r={6}
fill={"white"}
stroke={"black"}
strokeWidth={3} />
)
}}
/>
)
You also can incorporate child elements into your glyph to add labels and such.
import { Dot } from '@vx/glyph';
<GlyphDot ... >
<text
x={xScale(x(d))}
y={yScale(y(d))}
dx={10}
fill={"white"}
stroke={"black"}
strokeWidth={6}
fontSize={11}
>
{"Hi there!"}
</text>
</GlyphDot>
Glyph.GlyphDot
Name | Default | Type | Description |
---|---|---|---|
top | 0 | number | Margin on top |
left | 0 | number | Margin on left |
className | string | The class name associated of the LinePath shape | |
cx | number | The x-axis coordinate at the center of the circle | |
cy | number | The y-axis coordinate at the center of the circle | |
r | number | The radius of the circle | |
fill | string | The color of the circle's fill | |
stroke | string | The color of the circle's stroke | |
strokeWidth | number | The width of the circle's stroke | |
strokeDasharray | array | An array that controls the pattern of dashes in the stroke. See more here. |