@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

APIs

#<Glyph />

# childrenReactNode

Children to render.

# classNamestring | undefined

classname to apply to glyph g element container.

# leftnumber | undefined

Left offset to apply to glyph g element container.

Default 0

# topnumber | undefined

Top offset to apply to glyph g element container.

Default 0

#<GlyphCircle />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of circle in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<GlyphCross />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of cross in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<GlyphDiamond />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of diamond in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<GlyphDot />

# classNamestring | undefined

classname to apply to glyph path element.

# cxnumber | undefined

x coordinate of the center of the dot.

# cynumber | undefined

y coordinate of the center of the dot.

# leftnumber | undefined

Left offset to apply to glyph g element container.

Default 0

# rnumber | undefined

Radius of dot.

# topnumber | undefined

Top offset to apply to glyph g element container.

Default 0

#<GlyphSquare />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of square in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<GlyphStar />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of star in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<GlyphTriangle />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of triangle in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.

#<GlyphWye />

# children(({ path }: { path: Symbol<unknown, Datum>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator.

# classNamestring | undefined

classname to apply to glyph path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# sizenumber | ((d: Datum) => number) | undefined

Size of wye glyph in px, or an accessor which takes Datum as input and returns a size.

# topnumber | undefined

Top offset to apply to glyph g element container.