@vx/glyph

Glyphs are small marks or symbols that you can use in your charts. Example: https://vx-demo.now.sh/glyphs

Installation

npm install --save @vx/glyph

Examples

Components

APIs

#<Glyph />

# Glyph.childrenReactNodeoptional

Children to render.

# Glyph.classNamestringoptional

classname to apply to glyph g element container.

# Glyph.leftnumberoptional

Left offset to apply to glyph g element container.

Default 0

# Glyph.topnumberoptional

Top offset to apply to glyph g element container.

Default 0

#<GlyphCircle />

# GlyphCircle.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphCircle.classNamestringoptional

classname to apply to glyph path element.

# GlyphCircle.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphCircle.sizenumber | ((d: Datum) => number)optional

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

# GlyphCircle.topnumberoptional

Top offset to apply to glyph g element container.

#<GlyphCross />

# GlyphCross.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphCross.classNamestringoptional

classname to apply to glyph path element.

# GlyphCross.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphCross.sizenumber | ((d: Datum) => number)optional

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

# GlyphCross.topnumberoptional

Top offset to apply to glyph g element container.

#<GlyphDiamond />

# GlyphDiamond.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphDiamond.classNamestringoptional

classname to apply to glyph path element.

# GlyphDiamond.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphDiamond.sizenumber | ((d: Datum) => number)optional

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

# GlyphDiamond.topnumberoptional

Top offset to apply to glyph g element container.

#<GlyphDot />

# GlyphDot.classNamestringoptional

classname to apply to glyph path element.

# GlyphDot.cxnumberoptional

x coordinate of the center of the dot.

# GlyphDot.cynumberoptional

y coordinate of the center of the dot.

# GlyphDot.leftnumberoptional

Left offset to apply to glyph g element container.

Default 0

# GlyphDot.rnumberoptional

Radius of dot.

# GlyphDot.topnumberoptional

Top offset to apply to glyph g element container.

Default 0

#<GlyphSquare />

# GlyphSquare.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphSquare.classNamestringoptional

classname to apply to glyph path element.

# GlyphSquare.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphSquare.sizenumber | ((d: Datum) => number)optional

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

# GlyphSquare.topnumberoptional

Top offset to apply to glyph g element container.

#<GlyphStar />

# GlyphStar.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphStar.classNamestringoptional

classname to apply to glyph path element.

# GlyphStar.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphStar.sizenumber | ((d: Datum) => number)optional

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

# GlyphStar.topnumberoptional

Top offset to apply to glyph g element container.

#<GlyphTriangle />

# GlyphTriangle.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphTriangle.classNamestringoptional

classname to apply to glyph path element.

# GlyphTriangle.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphTriangle.sizenumber | ((d: Datum) => number)optional

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

# GlyphTriangle.topnumberoptional

Top offset to apply to glyph g element container.

#<GlyphWye />

# GlyphWye.children({ path }: { path: Symbol<any, Datum>; }) => ReactNodeoptional

Render function override which is passed the configured path generator.

# GlyphWye.classNamestringoptional

classname to apply to glyph path element.

# GlyphWye.leftnumberoptional

Left offset to apply to glyph g element container.

# GlyphWye.sizenumber | ((d: Datum) => number)optional

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

# GlyphWye.topnumberoptional

Top offset to apply to glyph g element container.