Axis
The picture below reveals the composition of our axes:
The Axis Configuration
Close the axis
chart.axis(false)
chart.axis(false)
Close all axes.
chart.axis(field, false)
chart.axis(field, false)
field
: String type, the data field name corresponding to the axis
Do not render the axis corresponding to the field.
Configure Axis
chart.axis(field, config)
chart.axis(field, config)
field
: String type, the data field name corresponding to the axisconfig
: Object type, configuration for the axis. It can be used to configure each component of the axis: include label, line, tick, tickLine and grid.The properties included are as follows:
Name | Type | Default | Description |
| Object / null |
| The axis line's configuration. The axis line is not displayed when |
| Number |
| The distance between the axis label and axis line |
| Object/Function/null |
| |
| Object/null |
| The configuration for style of the tickLine in axis. The tickLine of axis is not displayed when |
| Object/Function/null |
| |
| String |
| Configuration for the position of the Y-axis. X-axis defaults to 'bottom', the position of y-axis can be set to 'left' or 'right'. |
| Boolean |
| Used to adjust the layer level. |
line
, grid
, label
, tickLine
all have a property top
which is used to adjust the display layer, true
represents the top layer, false
means the bottom layer level.
Note: When grid and label are callback functions, the return values must be an object.
Creating Custom Label
If you want to change the axis label to include information about the data type, you can define a callback function for label. In the following example, every label of the Y axis would be formatted as a percentage, and if the value is greater than zero, the font color will be red, equal to zero is black, and less than zero is green.
If the callback returns null
or undefined
the label and the associated grid line will be hidden.
See detailed demo: here.
Creating Custom Grid
Same as label. The following example will highlight the grid line which the value is zero.
See detailed demo: here.
More Axis Configuration DemosD
Last updated