Marker symbols

Every value of marker.symbol that is built in. The lists on this page are generated from the symbol table the renderer draws from, which follows plotly.js' symbol order and numbering.

Holochart has 55 marker symbols. Each has 4 variants, the plain symbol and -open, -dot, -open-dot, which makes 220 names.

Every name also has a numeric code. The plain symbols are numbered 0 to 54 in the order of the table below, and each variant adds 100: arrow-wide is 54, arrow-wide-open is 154, arrow-wide-dot is 254, arrow-wide-open-dot is 354.

The chart below draws all of them with marker.symbol. Hover a marker for its name and code.

Loading example…

Loading source…

scatter/marker-symbols

Using a symbol

Set marker.symbol to a name or a code, for the whole trace or with one value per point:

import { createChart } from '@mk7s/holochart';

createChart(el, {
  data: [
    {
      type: 'scatter',
      mode: 'markers',
      x: [1, 2, 3, 4],
      y: [2, 3, 1, 4],
      marker: {
        // 317 is 'star-open-dot'.
        symbol: ['diamond', 'diamond-open', 'star-dot', 317],
        size: 14,
        color: '#5e74d5',
        line: { width: 1, color: '#eceef4' },
      },
    },
  ],
});

• The default is 'circle'.
• Names are lower case. A code can also be given as a string: '317'.
• A value for the whole trace that the trace type does not accept is reported as an invalid marker.symbol, and the trace draws circles. The entries of a per-point array are not checked: an unknown name draws a circle.

The variants differ in what marker.color and marker.line paint:

Variant	Fill	Outline and inner lines	Dot
plain	marker.color	marker.line.color, marker.line.width wide	none
-open	none	marker.color, marker.line.width wide or 1 px, whichever is more	none
-dot	marker.color	as the plain symbol	marker.line.color
-open-dot	none	as -open	marker.color

In the default look marker.line.width is 0, so a plain symbol has no outline until you set a width.

Trace types

Trace types	Attribute	Symbols	Numeric codes	One per point	Custom symbols
scatter, splom, scatterpolar	marker.symbol	All 220 names	Yes	Yes	Yes
box, violin	marker.symbol	All 220 names	Yes	No	Yes
scatter3d	marker.symbol	8: circle, circle-open, cross, diamond, diamond-open, square, square-open, x	No	Yes	No

Custom symbols are registered names and text: glyphs: see Custom symbols.

All symbols

Shape is drawn from the symbol's geometry, all at the same scale: the filled area is shaded and the lines are what marker.line strokes. The arrow symbols have their tip on the data point, so they extend to one side of it.

Shape	Name	Code	-open	-dot	-open-dot	Notes
	circle	0	100	200	300
	square	1	101	201	301
	diamond	2	102	202	302
	cross	3	103	203	303
	x	4	104	204	304
	triangle-up	5	105	205	305
	triangle-down	6	106	206	306
	triangle-left	7	107	207	307
	triangle-right	8	108	208	308
	triangle-ne	9	109	209	309
	triangle-se	10	110	210	310
	triangle-sw	11	111	211	311
	triangle-nw	12	112	212	312
	pentagon	13	113	213	313
	hexagon	14	114	214	314
	hexagon2	15	115	215	315
	octagon	16	116	216	316
	star	17	117	217	317
	hexagram	18	118	218	318
	star-triangle-up	19	119	219	319
	star-triangle-down	20	120	220	320
	star-square	21	121	221	321
	star-diamond	22	122	222	322
	diamond-tall	23	123	223	323
	diamond-wide	24	124	224	324
	hourglass	25	125	225	325
	bowtie	26	126	226	326
	circle-cross	27	127	227	327
	circle-x	28	128	228	328
	square-cross	29	129	229	329
	square-x	30	130	230	330
	diamond-cross	31	131	231	331
	diamond-x	32	132	232	332
	cross-thin	33	133	233	333	Line only, No dot
	x-thin	34	134	234	334	Line only, No dot
	asterisk	35	135	235	335	Line only, No dot
	hash	36	136	236	336	Line only
	y-up	37	137	237	337	Line only, No dot
	y-down	38	138	238	338	Line only, No dot
	y-left	39	139	239	339	Line only, No dot
	y-right	40	140	240	340	Line only, No dot
	line-ew	41	141	241	341	Line only, No dot
	line-ns	42	142	242	342	Line only, No dot
	line-ne	43	143	243	343	Line only, No dot
	line-nw	44	144	244	344	Line only, No dot
	arrow-up	45	145	245	345	No dot
	arrow-down	46	146	246	346	No dot
	arrow-left	47	147	247	347	No dot
	arrow-right	48	148	248	348	No dot
	arrow-bar-up	49	149	249	349	No dot
	arrow-bar-down	50	150	250	350	No dot
	arrow-bar-left	51	151	251	351	No dot
	arrow-bar-right	52	152	252	352	No dot
	arrow	53	153	253	353	No dot
	arrow-wide	54	154	254	354	No dot

Two notes apply to some symbols:

• Line only: the symbol has no area to fill. The plain symbol is drawn with marker.line alone, so it is invisible while marker.line.width is 0, which is the default. Set a line width, or use the -open name, which draws the lines in marker.color.
• No dot: the -dot and -open-dot names and codes are valid, but draw no dot. They look like the plain and the -open symbol.

Custom symbols

symbols.register turns an SVG path into a symbol name with the same three variants, and 'text:…' draws a character or an emoji as the marker. Both are covered in Custom markers. Registered names are not listed on this page: symbols.names() returns them at run time.

Related

• Line dash styles (line.dash): Line charts.
• Pattern fills for bars, slices and areas (marker.pattern, fillpattern): Patterns & textures.
• 3D markers: 3D scatter.