Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
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

Glyphs
<Glyph.GlyphDot />
Size
0
2.5
5
7.5
10
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
A
B
C
D
Custom Legend
a
b
c
d
$
e
Legends
<Legend />

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.

Exports