import { Axis } from 'ihme-ui'
| Property | Required | Type(s) | Defaults | Description |
|---|---|---|---|---|
className |
CommonPropTypes.className | className applied to outermost group element | ||
height |
number | 30 | height of charting area, minus padding required if translate is not provided |
|
label |
string | the axis label | ||
labelClassName |
CommonPropTypes.className | className applied to text element surrounding axis label | ||
labelStyle |
object | inline styles applied to text element surrounding axis label | ||
orientation |
true | one of: Object.keys(AXIS_TYPES) | where to position axis line; will position ticks accordingly one of: "top", "right", "bottom", "left" |
|
padding |
object | { top: 40, bottom: 40, left: 50, right: 50, } |
used to position label keys: 'top', 'bottom', 'left', 'right' |
|
rotateTickLabels |
bool | false | whether to rotate top/bottom axis tick labels 45 deg | |
scale |
func | scaleLinear() | appropriate scale for axis | |
style |
object | inline styles to apply to outermost group element | ||
ticks |
number | number of axis ticks use | ||
tickArguments |
array | alternative to tickValues and/or tickFormat | ||
tickFormat |
func | format of axis ticks | ||
tickPadding |
number | padding of axis ticks | ||
tickSize |
number | size of both inner and outer tick lines | ||
tickSizeInner |
number | size of inner tick lines | ||
tickSizeOuter |
number | size of outer tick lines | ||
tickValues |
array | user-specified tick values | ||
translate |
object | push axis in x or y direction keys: 'x' (required), 'y' (required) required if width and height are not provided |
||
width |
number | 900 | width of charting area, minus padding required if translate is not specified |
import { XAxis } from 'ihme-ui'
Chart x-axis that extends <Axis /> and provides some useful defaults.
All props documented on <Axis /> are available on <XAxis />. In addition, the following props are available:
| Property | Required | Type(s) | Defaults | Description |
|---|---|---|---|---|
autoFilterTickValues |
bool | falsey | if true, will dynamically filter tick values by the available width or height | |
orientation |
one of: 'top', 'bottom' | 'bottom' | where to position axis line; will position ticks accordingly | |
scale |
func | required if and only if props.scales is not provided |
||
scales |
func | required if and only if props.scale is not provided |
||
tickFontFamily |
string | 'Helvetica' | font-family of axis ticks; used when taking measurement of widest tick if autoFilterTickValues === true | |
tickFontSize |
number | 12 | font size of axis ticks, in pixels; used when taking measurement of widest tick or to determine tick height if autoFilterTickValues === true |
import { YAxis } from 'ihme-ui'
Chart y-axis that extends <Axis /> and provides some useful defaults.
All props documented on <Axis /> are available on <YAxis />. In addition, the following props are available:
| Property | Required | Type(s) | Defaults | Description |
|---|---|---|---|---|
autoFilterTickValues |
bool | falsey | if true, will dynamically filter tick values by the available width or height | |
orientation |
one of: 'left', 'right' | 'left' | where to position axis line; will position ticks accordingly | |
scale |
func | required if and only if props.scales is not provided |
||
scales |
func | required if and only if props.scale is not provided |
||
tickFontFamily |
string | 'Helvetica' | font-family of axis ticks; used when taking measurement of widest tick if autoFilterTickValues === true | |
tickFontSize |
number | 12 | font size of axis ticks, in pixels; used when taking measurement of widest tick or to determine tick height if autoFilterTickValues === true |