Primitives

Ultimately, all components in Hypocube are composed out of the same set of primitives. These base-layer components are responsible for SVG and canvas drawing, and converting between the Cartesian and pixel scales.

Line

The simplest component: a line connecting a set of points on the Cartesian scale. The line may be curved, or dashed.

path(required)Array<[number, number]>

A set of points, which are themselves a bipartite array in the form [x, y].

strokecolor | null

Default:#000

strokeWidthnumber

Default:1

fillcolor | null

Default:null

curveTypestring | D3CurveFactory

The "curve type" represents a function to calculate the shape of the line in between the data points, and can be a string or a d3 curve factory function. The available built-in curve types are "linear", "cardinal", "natural", "basis", or "step".

Default:linear

dashstring | [number, number]

This property represents the type of dash. It can be a bipartite array representing the number of rendered pixels followed by the number of blank pixels, or a string. The available built-in dash types are "solid", "dashed" (equivalent to `[5, 5]`), or "dotted" (equivalent to `[1, 1]`).

Default:solid

svgPointerEventsboolean

When false, sets pointer-events: none as an inline style. Useful for for restricting events to the underlying elements, especially the Chart element.

Default:true

PxLine

A variant of Line, which accepts the same props, but in which the path is specified on the pixel scale instead of the Cartesian scale.

TranslatedLine

A variant of Line, in which a set of points given on the pixel scale is rendered relative to an anchor point given on the Cartesian scale. It accepts the same props as Line (the path is in pixels), an an additional prop:

point(required)[number, number]

The anchor point for the rest of the path, on the Cartesian scale.

Text

Renders the text given in the text prop at position on the Cartesian scale.

position(required)[number, number]

The position of the text, given in the form [x, y].

text(required)string

The text to be rendered.

pxOffset[number, number]

An optional offset added to the position, in pixels.

colorcolor

Default:#000

fontstring

Default:Helvetica

fontSizenumber

Default:16

align'left' | 'center' | 'right'

Default:left

rotationnumber

Text rotation, in radians. (For vertical, bottom-to-top text, set to `0.5 * Math.PI`).

Default:0

svgPointerEventsboolean

When false, sets pointer-events: none as an inline style. Useful for for restricting events to the underlying elements, especially the Chart element.

Default:true

Symbol

A Symbol is a defined shape that renders at a particular point on the Cartesian scale. The type of Symbol can be given by a keyword, or a D3 Symbol.

point(required)[number, number]

The position of the symbol on the Cartesian scale.

sizenumber

Size of the symbol in pixels. For a circle, this corresponds to the diameter.

Default:5

symbolstring | D3SymbolType

A string refering to a type of symbol, or a d3 symbol function. The available built-in types are "circle", "cross", "diamond", "square", "star", "triangle", "wye" and "none".

Default:circle

rotationnumber

Data point rotation, in radians.

Default:0

strokecolor

Default:#000

strokeWidthnumber

Default:1

fillcolor

Default:1

quietRenderRadiusnumber

When SVG rendering, an invisible circle of the given radius is rendered around the symbol. This ensures that the Symbol is clickable, even when the actual symbol drawn is very small. Note that by default the value is 0, which means only the symbol itself is rendered.

Default:0

svgPointerEventsboolean

When false, sets pointer-events: none as an inline style. Useful for for restricting events to the underlying elements, especially the Chart element.

Default:true

Handle

The Handle component renders an SVG g element that binds all passed event handlers to it. It "remaps" the callbacks passed to these handlers to extract positional information about the event, and return it in a form meaningful on the Cartesian scale. In addition to the pointer event handlers themselves, the Handle component accepts the following props:

elementPosition[number, number]

A semantically meaningful position for the element on the Cartesian scale. For example, for a data point, this would be the actual position of the point. For a "range"-type element, it would be the anchor point of the range. The prop is not required, but callbacks triggered on a Handle without it will have an undefined `elementPosition` in the passed event object.

metaRecord<string | boolean | number>

Any meta data that needs to be passed back to the event handlers. If not specified, an empty object will be passed instead.

Clip

The children of a Clip component will visibly render only within the path passed to Clip as a prop. This primitive is used to keep data series from displaying on top of axes, for example.

pathArray<[number, number]> | null

Children outside of this path will not render. If the value is null or undefined, or an empty array, then everything will render.

Chart Furniture