@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.