...
Axis settings need to be applied to either the "x" or "y" axis. The settings between each axis are identical.
Setting | Description | Notes |
|---|---|---|
| display | Whether to show the line for this axis. Example: true | - |
| title | Axis label for the graph. These use the same settings as the Graph Title. | - |
| grid | Settings to control the axis grid. | - |
| grid → display | Whether to show the lines for the axis grid. Example: true | - |
| grid → color | Colour of the axis grid lines. Example: "#0ff000" | - |
| max | This is the maximum value of either axis. This value will depend on the values used on your axis, so it could be numerical or alphanumerical, e.g. if the x axis contained a list of months you could set the max to 'April' so that it would not show content past this value, if you wanted to restrict it to the current financial year for example. | If you are using a text value as your maximum this must be a value with data associated to it. For example, if one of your axes is labelled with days of the week and your data includes the values Monday, Tuesday, Thursday, Friday and Saturday, then you would not be able to use the setting "max":"Wednesday". This is because there is no Wednesday data in the graph. A numerical value doesn't have this same issue. |
Example
| Code Block |
|---|
{
"axis": {
"x": {
"display": true,
"title": {
"text": "Horizontal Axis Label",
"font": "Times New Roman",
"fontSize": 22,
"fontStyle": "bold",
"color": "#fff000",
"padding": 10
},
"grid": {
"display": true,
"color": "#fff000"
}
},
"y": {
"display": true,
"title": {
"text": "Vertical Axis Label",
"font": "Times New Roman",
"fontSize": 22,
"fontStyle": "bold",
"color": "#f0f0ff",
"padding": 10
},
"grid": {
"display": true,
"color": "#3a4f3a"
}
}
}
} |
...