...
| Code Block |
|---|
{
"legend": {
"display": true,
"position": "left",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "bold",
"color": "fff",
"padding": 5
}
} |
Tooltip settings
Setting | Description |
|---|---|
| display | Whether to show tooltips. Example: true |
| backgroundColor | The colour to set the tooltip background. Example: "#dad4da" |
| font | Font to use in tooltips. Only works if the user has the font installed. Example: "Times New Roman" |
| fontSize | Size of the text in the tooltip in pixels. Example: 16 |
| fontStyle | Text style to apply to the tooltip. Example: "bold" |
| color | Colour for tooltip text in hexadecimal or RGB. Example: "#f0f0f0" |
| borderRadius | The roundness of the edges of the tooltip (in pixels). Example: 2 |
| borderColor | The colour of the tooltip border. Example: "#0a7b92" |
| borderWidth | The thickness of the tooltip border (in pixels). Example: 2 |
...
| Code Block |
|---|
{
"tooltips": {
"display": true,
"backgroundColor": "#ddd",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "bold",
"color": "#fff",
"borderRadius": 5,
"borderColor": "#0a7b92",
"borderWidth": 3
}
} |
Axis settings
Axis settings need to be applied to either the "x" or "y" axis. The settings between each axis are identical.
...
| Code Block |
|---|
{
"axis": {
"x": {
"display": true,
"title": {
"text": "Horizontal Axis Label",
"font": "Times New Roman",
"fontSize": 22,
"fontStyle": "bold",
"color": "#fff000",
"padding": 10
"max": "April",
},
"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"
}
}
}
} |
Graph colour settings
As of Totara 13.2 it is possible to specify graph colours using both ChartJS and SVGGraph.
...
| Code Block |
|---|
{"colors" : ["green"],
"type" : {
"progress": {
"totalsSupplied": true,
"backgroundColor": "red"
}
}
} |
Library-specific settings
If you want to write more advanced settings to take advantage of some of the extended capabilities of your charting library, you may use the "custom" settings field to pass settings directly to the library. These will not be cross-compatible.
...