Menu

Components

Because Layer Cake doesn't come with any pre-built components, here are a few options to get you started. These are meant to serve as starting points for many common chart types. They have a few built-in options to be flexible for handling different scenarios so they can be reused as much as possible. For example, the Scatter components support both linear and ordinal scales so you can use them in configurations like a regular Scatter plot but also charts like the Time of Day plot where the y-scale is made up of groups.

Some componens have HTML, SVG and Canvas versions and those marked as %-range are optimized to be used server-side with the percentRange=true prop.

Axis components

SVG

AxisX svg
AxisY svg

HTML

AxisX %-rangehtml
1980
1985
1990
1995
2000
2005
2010
2015
AxisXTop %-rangehtml
1980
1985
1990
1995
2000
2005
2010
2015
AxisY %-rangehtml
4
5
6
7
AxisYRight %-rangehtml
4
5
6
7

Chart components

SVG

Area svg
Bar svg
Column svg
Line svg
Radar svg
Sankey svg

HTML

ClevelandDotPlot %-rangehtml
Scatter html

Canvas

Scatter canvas

WebGL

Scatter webgl

Map components

Canvas

Map canvas
MapPoints canvas

SVG

Map svg

HTML

Interaction components

HTML

Brush html
QuadTree %-rangehtml
SharedTooltip %-rangehtml
Tooltip html

SVG

Annotation components

HTML

SVG

Arrows svg