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.
<Chart
height={300}
view={[0, 0, 4, 5]}
chartStyle={{
dataLineStroke: 'blue',
dataPointFill: 'blue',
dataPointSymbol: 'diamond',
}}
>
<XAxis />
<YAxis />
<LineSeries
data={[
[1, 3],
[2, 2],
[3, 3.5],
]}
chartStyle={{
dataLineStroke: 'green',
dataPointFill: 'green',
dataPointSymbol: 'cross',
}}
/>
<LineSeries
data={[
[1, 1],
[2, 3],
[3, 4],
]}
/>
</Chart>
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).
<Chart
maxWidth={1024}
height={100}
view={[0, 0, 4, 5]}
isCanvas={false}
chartStyle={{
dataBoxFill: 'blue',
dataBoxThickness: ({ pxWidth }) => pxWidth / 2,
dataBoxFill: ({ pxWidth }) => `rgba(12, 12, 254, ${pxWidth / 1024})`,
}}
>
<XAxis />
<YAxis />
<BarVerticalSeries data={[[2, 2]]} />
</Chart>
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
fontSizenumberHelp wanted: encode font family, and font weight.
Default:16
svgPointerEventsbooleanWhen 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.
Default:true
Axes
See also the axes documentation.
axisColorcolorStroke color the axis line, tick marks, tick mark labels, and axis label.
Default:#666
axisColorcolorStroke color the axis line, tick marks, tick mark labels, and axis label.
Default:#666
axisStrokeWidthnumberStroke width of the main axis line in pixels.
Default:2
axisTickLengthnumberLength of axis tick marks in pixels.
Default:10
axisTickOffsetnumberDistance between the axis and the start of the tick mark. Normally, 0.
Default:0
axisTickModulusintegerThe 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.
Default:1
axisTickLabelOffsetnumberDistance between the end of the tick mark and the nearest edge of the label.
Default:2
axisTickLabelModulusintegerThe 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.
Default:1
xAxisLabelPositionnumberNumber 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.
Default:46
yAxisLabelPositionnumberNumber 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.
Default:-60
Data Series
seriesXOffsetnumberThe 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.
Default:0
seriesOpacitynumberOverall opacity level (ranging from 0 to 1) for all elements (boxes, ranges and lines) in a data series.
Default:0
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.
dataBoxFillcolorDefault:#000
dataBoxStrokecolorDefault:#000
dataBoxStrokeWidthnumberDefault:0
dataBoxThicknessnumberThe 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.
Default:10
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.
dataPointSizenumberThe 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.
Default:5
dataPointRotationnumberRotation of data points, in radians.
Default:0
dataPointSymbolstring | D3SymbolTypeA 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.
Default:none
dataPointFillcolorDefault:#000
dataPointStrokecolorDefault:#000
dataPointStrokeWidthnumberDefault:0
dataPointMinTargetRadiusnumberSmall 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.
Default:0
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 | D3CurveFactoryThe "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
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]`).
Default:solid
dataLineStrokecolorDefault:#000
dataLineStrokeWidthnumberDefault: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.
dataRangeCapLengthnumberThe 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.
Default:10
dataRangeStrokecolorDefault:#000
dataRangeStrokeWidthnumberDefault:2
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.
dataAreaFillcolorDefault: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.
getSeriesColors
(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.
<div style={{ height: 30 }}>
{getSeriesColors(['#003f5c', '#ffa600'], 7).map((color) => (
<div
style={{
backgroundColor: color,
width: 30,
height: '100%',
float: 'left',
}}
></div>
))}
</div>
getSeriesOffsets
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.