Components Interactions Examples Tutorials API FAQ

Plottable Concepts


Components are the modular building blocks of charts in Plottable. A Component is an object that requires visual space and can be placed on a table. Examples of Components include Axes, Labels, Legends, Gridlines, and Plots.

Components can be overlaid on top of each other by placing them in a single Group, which is a Component in itself.

A library of available components is available here.


Scales can be thought of as functions (in the mathematical sense) that map values from a domain to a range. They essentially function as bridges between Components. For example, if both a Plot and an Axis are driven by the same Scale, then changes to the Plot, such as zooming in and out to change the domain of the data, will be reflected in the Axis.

Table Layout

At the core of any Plottable-based chart is a table-based layout engine. Think of Plottable as a table within an svg element, where each cell in the Table can draw a Component. Take the following example:

As you can see, there is one Table with two columns and two rows. We represent this Table as an array of arrays of Components:

// Table as an array of arrays
 [yAxis, linePlot],
 [null,  xAxis   ]

Tables themselves are also Components. As a result, we can create much more complicated charts by nesting Tables within a larger Table.

Now that you have the conceptual background for how charts in Plottable are built, hop on over to the next tutorial, building a basic chart