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
classname to apply to glyph g element container.
number
Left offset to apply to glyph g element container.
Default 0
number
Top offset to apply to glyph g element container.
Default 0
#<GlyphCircle />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of circle in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.
#<GlyphCross />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of cross in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.
#<GlyphDiamond />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of diamond in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.
#<GlyphDot />
string
classname to apply to glyph path element.
number
x coordinate of the center of the dot.
number
y coordinate of the center of the dot.
number
Left offset to apply to glyph g element container.
Default 0
number
Radius of dot.
number
Top offset to apply to glyph g element container.
Default 0
#<GlyphSquare />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of square in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.
#<GlyphStar />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of star in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.
#<GlyphTriangle />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of triangle in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.
#<GlyphWye />
({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode
Render function override which is passed the configured path generator.
string
classname to apply to glyph path element.
number
Left offset to apply to glyph g element container.
number | ((d: Datum) => number)
Size of wye glyph in px, or an accessor which takes Datum as input and returns a size.
number
Top offset to apply to glyph g element container.