Data utilities
Umbrella package
@visx/glyph
Glyphs are small marks or symbols that you can use in your charts. Example: https://airbnb.io/visx/glyphs
Installation
npm install --save @visx/glyph
Examples
<Glyph.GlyphDot />
<Legend />
APIs
#<Glyph />
ReactNode
Children to render.
string | undefined
classname to apply to glyph g element container.
number | undefined
Left offset to apply to glyph g element container.
Default 0
number | undefined
Top offset to apply to glyph g element container.
Default 0
#<GlyphCircle />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of circle in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.
#<GlyphCross />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of cross in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.
#<GlyphDiamond />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of diamond in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.
#<GlyphDot />
string | undefined
classname to apply to glyph path element.
number | undefined
x coordinate of the center of the dot.
number | undefined
y coordinate of the center of the dot.
number | undefined
Left offset to apply to glyph g element container.
Default 0
number | undefined
Radius of dot.
number | undefined
Top offset to apply to glyph g element container.
Default 0
#<GlyphSquare />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of square in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.
#<GlyphStar />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of star in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.
#<GlyphTriangle />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of triangle in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.
#<GlyphWye />
(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined
Render function override which is passed the configured path generator.
string | undefined
classname to apply to glyph path element.
number | undefined
Left offset to apply to glyph g element container.
number | ((d: Datum) => number) | undefined
Size of wye glyph in px, or an accessor which takes Datum as input and returns a size.
number | undefined
Top offset to apply to glyph g element container.