THE PLAYGROUND / 383 EXAMPLES
A mark for every idea.
Explore every reference example, then take the code and make it yours.
Real BorrowdaleJS output. No screenshot stand-ins.
Reference fixtures cover supported families and edge cases. Numeric and style combinations are open-ended.
01
bars grouped
barEdit code & explore ↗
02
bars and line on y2
bar + lineEdit code & explore ↗
03
bars horizontal percent
barEdit code & explore ↗
04
bars negative stacked
barEdit code & explore ↗
05
lines curves and gaps
lineEdit code & explore ↗
06
line horizontal
lineEdit code & explore ↗
07
areas stacked
areaEdit code & explore ↗
08
areas percent stepped
areaEdit code & explore ↗
09
range area and line
rangeArea + lineEdit code & explore ↗
10
scatter and bubbles
scatter + bubbleEdit code & explore ↗
11
sparkline bars
barEdit code & explore ↗
12
pie with a zero slice
pieEdit code & explore ↗
140 examples · Page 1 of 12
Browse all 383 playgrounds
charts
- bars grouped
- bars and line on y2
- bars horizontal percent
- bars negative stacked
- lines curves and gaps
- line horizontal
- areas stacked
- areas percent stepped
- range area and line
- scatter and bubbles
- sparkline bars
- pie with a zero slice
- donut half
- pie one slice
- donut one slice
- radar
- radar hidden radius
- missing glyphs
- large numbers
- small numbers
- grid off and band y title
- hidden x
- hidden y2 on a combo
- bars percent with negatives
- stacks apart by axis and type
- bars horizontal percent uneven totals
- dense categories
- line flat
- own colour first
- legend wrapped
- hidden y visible y2
- bars zero values
- donut three quarter
- bars wide band labels
- bars horizontal wide value labels
- bars percent zero category
- areas stacked with zero
- radar four spokes
- scatter wide first x label
- donut dominant slice
- pie one slice rounded turn
- bars nine hatched series
- pie narrow partial
- rose stacked
- rose grouped hole
- rose half
- radial bar three quarters
- radial bar stacked
- radial bar grouped negative
- polar line area closed
- polar line gaps
- polar area stacked
- polar area half
- polar scatter
- polar scatter quarter
- donut spaced rounded
- pie exploded
- pie rings
- pie variable radius
- donut half rounded
- pie rotated
- radar circle grid
- radar range
- gauge needle bands
- gauge semicircle bar
- gauge default dial
- gauge clock
- gauge bars in rings
- labels rotated band
- labels rotated vertical
- labels rotated linear
- labels rotated left
- labels rotated left linear
- gauge offset dial
- pie outer radius offset
- pie rings pulled inner
- donut variable radius
- donut narrow
- gauge bars negative
- pie thin rounded
- polar line one gap
- labels refitted
- labels rotated y2
- gauge needle then bars
- gauge offset dial bar
- line horizontal steps
- area horizontal linear
- title and legend cut short
- band end labels narrowed
- bubbles at fixed ends
- lollipop vertical
- lollipop horizontal
- dumbbell
- slope
- connected scatter
- error bars
- confidence band
- waterfall vertical
- waterfall horizontal
- stacked waterfall
- bullet vertical
- bullet vertical range
- bullet horizontal
- bullet horizontal range
- pareto
- population pyramid
- likert
- barcode
- cleveland dot
- difference area
- threshold area
- segment styles
- threshold line
- gradient line
- trail
- comet
- rounded bars
- pyramid bars
- variwide
- index line
- change line
- function plot
- annotations
- gauge clock hours
- gauge compass
- line listed ticks
- time axis line
- time range bars
- time gantt
- time x range
- time annotation chart
- time cycle plot
- time marey
- log scatter
- sqrt bars
- timeline serpentine
- timeline spiral
- timeline polyline
- image markers
- data labels
shapes
- line/outline/a
- rectangle/outline/a
- ellipse/outline/a
- circle/outline/a
- arc closed/outline/a
- arc open/outline/a
- polygon/outline/a
- star/outline/a
- linearPath/outline/a
- curve/outline/a
- path lines/outline/a
- path quadratic/outline/a
- path arc/outline/a
- rectangle/hachure/a
- rectangle/solid/a
- rectangle/zigzag/a
- rectangle/cross hatch/a
- rectangle/dashed/a
- rectangle/zigzag line/a
- rectangle/dots/a
- ellipse/hachure/a
- ellipse/solid/a
- ellipse/zigzag/a
- ellipse/cross hatch/a
- ellipse/dashed/a
- ellipse/zigzag line/a
- ellipse/dots/a
- circle/hachure/a
- circle/solid/a
- circle/zigzag/a
- circle/cross hatch/a
- circle/dashed/a
- circle/zigzag line/a
- circle/dots/a
- arc closed/hachure/a
- arc closed/solid/a
- arc closed/zigzag/a
- arc closed/cross hatch/a
- arc closed/dashed/a
- arc closed/zigzag line/a
- arc closed/dots/a
- polygon/hachure/a
- polygon/solid/a
- polygon/zigzag/a
- polygon/cross hatch/a
- polygon/dashed/a
- polygon/zigzag line/a
- polygon/dots/a
- star/hachure/a
- star/solid/a
- star/zigzag/a
- star/cross hatch/a
- star/dashed/a
- star/zigzag line/a
- star/dots/a
- curve/hachure/a
- curve/solid/a
- curve/zigzag/a
- curve/cross hatch/a
- curve/dashed/a
- curve/zigzag line/a
- curve/dots/a
- path lines/hachure/a
- path lines/solid/a
- path lines/zigzag/a
- path lines/cross hatch/a
- path lines/dashed/a
- path lines/zigzag line/a
- path lines/dots/a
- path arc/hachure/a
- path arc/solid/a
- path arc/zigzag/a
- path arc/cross hatch/a
- path arc/dashed/a
- path arc/zigzag line/a
- path arc/dots/a
- line/outline/b
- rectangle/outline/b
- ellipse/outline/b
- circle/outline/b
- arc closed/outline/b
- arc open/outline/b
- polygon/outline/b
- star/outline/b
- linearPath/outline/b
- curve/outline/b
- path lines/outline/b
- path quadratic/outline/b
- path arc/outline/b
- rectangle/hachure/b
- rectangle/solid/b
- rectangle/zigzag/b
- rectangle/cross hatch/b
- rectangle/dashed/b
- rectangle/zigzag line/b
- rectangle/dots/b
- ellipse/hachure/b
- ellipse/solid/b
- ellipse/zigzag/b
- ellipse/cross hatch/b
- ellipse/dashed/b
- ellipse/zigzag line/b
- ellipse/dots/b
- circle/hachure/b
- circle/solid/b
- circle/zigzag/b
- circle/cross hatch/b
- circle/dashed/b
- circle/zigzag line/b
- circle/dots/b
- arc closed/hachure/b
- arc closed/solid/b
- arc closed/zigzag/b
- arc closed/cross hatch/b
- arc closed/dashed/b
- arc closed/zigzag line/b
- arc closed/dots/b
- polygon/hachure/b
- polygon/solid/b
- polygon/zigzag/b
- polygon/cross hatch/b
- polygon/dashed/b
- polygon/zigzag line/b
- polygon/dots/b
- star/hachure/b
- star/solid/b
- star/zigzag/b
- star/cross hatch/b
- star/dashed/b
- star/zigzag line/b
- star/dots/b
- curve/hachure/b
- curve/solid/b
- curve/zigzag/b
- curve/cross hatch/b
- curve/dashed/b
- curve/zigzag line/b
- curve/dots/b
- path lines/hachure/b
- path lines/solid/b
- path lines/zigzag/b
- path lines/cross hatch/b
- path lines/dashed/b
- path lines/zigzag line/b
- path lines/dots/b
- path arc/hachure/b
- path arc/solid/b
- path arc/zigzag/b
- path arc/cross hatch/b
- path arc/dashed/b
- path arc/zigzag line/b
- path arc/dots/b
- option/roughness 0
- option/roughness 2.5
- option/bowing 3
- option/hachure angle 41
- option/hachure gap 8
- option/fill weight 2
- option/stroke style
- option/dash gap length
- option/zigzag width
- option/curve tightness
- option/curve fitting
- option/curve step count
- option/hachure gap fractional
- option/zigzag gap fractional
- option/path arc asymmetric
- option/path arc large sweep
- option/path relative commands
- option/path smooth absolute
- option/curve long fill
- option/curve three point fill
- option/line 300
- option/line 450
- option/line 700
- option/rectangle fill none
- option/curve fill none
- option/path fill transparent
- option/arc open with fill
- option/arc over full turn
- option/arc roughness 0
- option/arc half closed filled roughness 0
- option/ellipse roughness 0
- option/hachure angle vertical
- option/dashed angle horizontal
- option/path implicit lineto after m
- option/path t after t
- option/path s after s
- option/path relative after z
- option/path arc zero radius
- option/path asymmetric cubic fill
- option/curve asymmetric fill
- option/path large s cubic fill
- option/default seed
- option/stroke line dash
- option/stroke line dash hachure
text
- tick zero
- tick thousands
- tick ten thousands
- tick decimal
- category zurich
- category lodz
- category sao paulo
- title
- legend entry
- axis title vertical
- kerning pairs
- ligatures
- greek
- cyrillic
- decomposed accent
- whitespace
- markup characters
- small
- large
- fill
- uncovered characters
- empty
- soft hyphen
- every character latin
- every character latin ext
- every character greek
- every character cyrillic
- every character cyrillic ext
- every character marks
- presentation controls
- cyrillic stress mark
patterns
components
TRY THE LETTERING
Find your own words.
Measured and drawn with @borrowdale/text.