The Chart Style Object

The Principle of Inheritance

Chart styles are designed to have a CSS-like interface. First and foremost, this means that "specific declarations beat general declarations." In the chart below, there are two line series. The first has a specific style applied. The second has no specific style applied, and therefore defaults to the style given on the general Chart component.

Contextual Chart Styles

In responsive design, styles often depend on the viewport width or other "device capabilities", authored in CSS either as media queries or as properties given as a fraction of container width. All chart styles can be given as a function of the rendered height and width of the chart, in the form ({ pxWidth, pxHeight }) => (property value). This means that, for example, the width of a bar or the font size on an axis label can be adjusted to fit the available space.

In this example, the bar in the bar graph will always be rendered at half the width of the total chart width, and will change color depending on the width. (You can change it by adjusting the maxWidth of the containing div).

The styles

Similar to CSS, all chart elements have access to all possible chart styles, although only a few are relevant. In the documentation of each component, we'll note the styles that are most often used to apply to that element, in particular.

Note: In the list below, "color" indicates any color string allowed by CSS.

Text labels

Help wanted: encode font family, and font weight.
When false, this sets `pointer-events: "none"` on all internal SVG elements. This allows the event to trigger on an underlying element, and can help reduce apparent jittering or jankiness when the desired primary point of interaction is on the `Chart` itself. When `isCanvas=` on the `Chart` component, this property has no effect.


See also the axes documentation.

Stroke color the axis line, tick marks, tick mark labels, and axis label.
Stroke color the axis line, tick marks, tick mark labels, and axis label.
Stroke width of the main axis line in pixels.
Length of axis tick marks in pixels.
Distance between the axis and the start of the tick mark. Normally, 0.
The frequency with which the tick marks passed to an axis will be rendered. By default (value `1`) all tick marks will be rendered. If the value is `2`, then every other tick will be rendered and so on. This property is useful to selectively remove ticks as the chart becomes smaller.
Distance between the end of the tick mark and the nearest edge of the label.
The frequency with which the tick mark labels on an axis will be rendered. By default (value `1`) all labels will be rendered. If the value is `2`, then every other label will be rendered and so on. This property is useful to selectively remove labels as the chart becomes smaller. This value compounds with `axisTickModulus` and so generally it should be a multiple of that value.
Number of pixels between the x-axis line and the bottom edge of the label. In many cases this can correspond to the bottom gutter of the chart.
Number of pixels between the y-axis line and the left edge of the label *rotated label*. In many cases this can correspond to the left gutter of the chart. Note that when when this value is positive, the label rotation will be reversed.

Data Series

The offset of any data point along the x-axis. This is useful in a categorical bar graph so that multiple series don't sit behind on another, for example. The `seriesStyles' helper functions can be used to automatically create offsets for multiple bar series.
Overall opacity level (ranging from 0 to 1) for all elements (boxes, ranges and lines) in a data series.

Data boxes

A data box is a rectangle used to indicate a data point (by stretching to the 0 value on the same axis) or a data range (by stretching between two values on the same axis). It is most commonly used as the data markers in a bar series.

The length of the data box across the axis opposite to the one in which the box indicates data. In a vertical bar series, it would be the width of the data box; in a horizontal bar series, it would be the height.

Data points

A data point is a visual marker at defined coordinates. It is most commonly used as the markers in a line series, alone or in conjunction with a data line.

The size in pixels of the data point from one end to the other. In other words, the data point is drawn to fit within a square of `dataPointSize` pixels along either dimension.
Rotation of data points, in radians.
dataPointSymbolstring | 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". Note that the default in "none", so to make symbols visible, another value will have to be provided.
Small data points can be hard for users to click on. If this style is provided, an invisible circle is drawn around each data point that can act as a target for pointer events. If this style is left at the default zero value, or is smaller than the data point size itself, then the data point itself is the only event target.

Data lines

A data line is a line drawn between all of the data points in a series. It is most commonly used as the marker in a line series, alone or in conjunction with data points.

dataLineCurveTypestring | 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".
dataLineDashTypestring | [number, number]
Data lines can be solid, or dashed. 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]`).

Data ranges

Data ranges represent a span of data along one axis (usually the y-axis), at a defined location on the other axis (usually the x-axis). The default range marker is is a "cap" rendered at each end of the range, with a vertical line connecting them. This marker is commonly associated with error bars but possibly used to represent other types of ranges. See the range series docs for more information about what can be done with this type of data series.

The default range cap is a line of this length along the non-data axis (similar to drawing the top edge of an data bar). The default value is 10.

Data area

Data areas represent the space between two lines on the y-axis, and extend across the x-axis for all the width at which both lines are defined. See the area chart docs for more information.

Default:rgba(102, 102, 102, 0.2)

Series Style Helpers

To generate styles for multiple series that will appear on the same chart, Hypocube provides a couple of helper functions.


(palette: Color[], numSeries: number) => Color[]

When provided a color palette (usually two colors), and the number of colors to generate, will generate a set of colors within that palette.


This function can be used to generate seriesXOffset values.

(stepSize: number, numSeries: number) => number[]

Given the distance between series (eg. the width of a bar) and the number of series to use, it will generate a set of offsets, which can be plugged into the seriesXOffset style. Note that a contextual function can be passed to step size, in which case getSeriesOffsets will generate an array of contextual functions.