@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

classname to apply to glyph g element container.

# leftnumber

Left offset to apply to glyph g element container.

Default 0

# topnumber

Top offset to apply to glyph g element container.

Default 0

#<GlyphCircle />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.

#<GlyphCross />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.

#<GlyphDiamond />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.

#<GlyphDot />

# classNamestring

classname to apply to glyph path element.

# cxnumber

x coordinate of the center of the dot.

# cynumber

y coordinate of the center of the dot.

# leftnumber

Left offset to apply to glyph g element container.

Default 0

# rnumber

Radius of dot.

# topnumber

Top offset to apply to glyph g element container.

Default 0

#<GlyphSquare />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.

#<GlyphStar />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.

#<GlyphTriangle />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.

#<GlyphWye />

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

Render function override which is passed the configured path generator.

# classNamestring

classname to apply to glyph path element.

# leftnumber

Left offset to apply to glyph g element container.

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

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

# topnumber

Top offset to apply to glyph g element container.