Skip to content
Lisa Zhang edited this page Dec 3, 2013 · 2 revisions

WikiAPI ReferenceChart

The function polyjs.chart() takes a specification object spec and renders the graphic. This page explains the attributes that can be set through the spec object, and other concepts relevant to the specification of charts.

Concepts

Specification Attributes

TypeA single Layer Object (for spec.layer) or an array of Layer Objects (for spec.layers)
RequiredYes

A layer is where the most important aspect of a chart is defined. Each layer contains information about the type of graphic being plotted, the data being used, as well as which data column are mapped to which visual aesthetics. The attribute spec.layer should be a JSON object specifying a single layer. You can overlay multiple layers within a single chart (e.g. a scatter plot on top of a bar chart). In that case, the attribute spec.layers should be used to specify an array of layers. Specification of layers is discussed in the Layer documentation page.

TypeAn associate array of aesthetics to Guide Specification Objects.
RequiredNo (Optional)

A guide describes how data and scales are related visually. For instance, the range of the x- and y-axis and the colour palette of a legend all fall under the realm of guides. The guides field expects an associative array which maps aesthetics to JSON objects that specify guides for that aesthetic.

TypeA Coordinate Object
RequiredNo (Optional)
DefaultCartesian coordinate

This object specifies the type of coordinate system to be used in the graph -- for example, cartesian or polar coordinates.

TypeA Facet Object
RequiredNo (Optional)
DefaultNo Facet

Faceting in a chart is a visualization method in which different variables in a dataset may be isolated and displayed separately. This object shall specify what splitting is to be done, and how it will be displayed.

spec.dom

TypeString
RequiredYes

A DOM element or an identifier of a DOM element to plot the chart in.

spec.width

TypeInt
RequiredNo (Optional)
Default400

The width of the chart in pixels.

spec.height

TypeInt
RequiredNo (Optional)
Default400

The height of the chart in pixels.

spec.title

TypeString
RequiredNo (Optional)
DefaultBlank

The title of the chart.

spec.tooltip

TypeBool
RequiredNo (Optional)
DefaultTrue

Whether or not to add automatic tooltips. (Note, this turns on the polyjs.hander.tooltip interaction method.)

spec.zoom

TypeBool
RequiredNo (Optional)
DefaultTrue

Whether or not to add the automatic interaction method that allows users to select to zoom. (Note, this turns on the polyjs.hander.tooltip interaction method.)

spec.paddingLeft

TypeInt
RequiredNo (Optional)
Default10

An integer defining the amount of white space on the left side of the chart, in pixels.

spec.paddingRight

TypeInt
RequiredNo (Optional)
Default10

An integer defining the amount of white space on the right side of the chart, in pixels.

spec.paddingTop

TypeInt
RequiredNo (Optional)
Default10

An integer defining the amount of white space above the chart, in pixels.

spec.paddingBottom

TypeInt
RequiredNo (Optional)
Default10

An integer defining the amount of white space below the chart, in pixels.

spec.verticalSpacing

TypeInt
RequiredNo (Optional)
Default20

Vertical spacing between adjacent facets in the same column, in pixels.

spec.horizontalSpacing

TypeInt
RequiredNo (Optional)
Default10

Horizontal spacing between adjacent facets in the same column, in pixels.

spec.legendPosition

TypeString
RequiredNo (Optional)
Default'right'

The position of the legend with respect to the main body of the chart. Should be one of the following strings: left, right, top, bottom, none.

Clone this wiki locally