Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/vx

@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

Glyphs

<Glyph.GlyphDot />

Size

2.5

7.5

Quantile

0 - 0.03

0.03 - 0.06

0.06 - 0.09

0.09 - 0.12

0.12 - 0.15

Linear

0.0

5.0

10.0

Threshold

More than 0.08

0.06 to 0.08

0.04 to 0.06

0.02 to 0.04

0.01 to 0.02

Less than 0.01

Ordinal

Custom Legend

Legends

<Legend />

APIs

#<Glyph />

# Glyph.childrenReactNodeoptional

Children to render.

# Glyph.classNamestring | undefinedoptional

classname to apply to glyph g element container.

# Glyph.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

Default 0

# Glyph.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

Default 0

#<GlyphCircle />

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

Render function override which is passed the configured path generator.

# GlyphCircle.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphCircle.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphCircle.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<GlyphCross />

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

Render function override which is passed the configured path generator.

# GlyphCross.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphCross.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphCross.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<GlyphDiamond />

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

Render function override which is passed the configured path generator.

# GlyphDiamond.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphDiamond.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphDiamond.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<GlyphDot />

# GlyphDot.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphDot.cxnumber | undefinedoptional

x coordinate of the center of the dot.

# GlyphDot.cynumber | undefinedoptional

y coordinate of the center of the dot.

# GlyphDot.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

Default 0

# GlyphDot.rnumber | undefinedoptional

Radius of dot.

# GlyphDot.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

Default 0

#<GlyphSquare />

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

Render function override which is passed the configured path generator.

# GlyphSquare.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphSquare.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphSquare.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<GlyphStar />

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

Render function override which is passed the configured path generator.

# GlyphStar.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphStar.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphStar.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<GlyphTriangle />

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

Render function override which is passed the configured path generator.

# GlyphTriangle.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphTriangle.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphTriangle.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<GlyphWye />

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

Render function override which is passed the configured path generator.

# GlyphWye.classNamestring | undefinedoptional

classname to apply to glyph path element.

# GlyphWye.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

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

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

# GlyphWye.topnumber | undefinedoptional

Top offset to apply to glyph g element container.