Users have the option to customise elements of a graph's look and feel through the Advanced settings field. This can perform several tasks:
- Change the graph and axis titles
- Change the font size, colour, and style
- Modify the legend position and style
Please note that a number of advanced graph customisations are not currently available with ChartJS. For example, if you require full colour customisation then you will need to use SVGGraph.
As of Totara 13, the advanced settings field for Totara graphical reports is written in JSON format to specify custom settings that will work across all charting libraries. If you had specified INI settings in Totara 12 or below, a compatible version of your settings should already be present.
These settings are not specific to a charting library and will work when using both ChartJS and SVGGraph graphs.
Title settings
Setting | Description |
|---|---|
| text | The title text to show on the graph. Example: "Course Completion Report" |
| position | Where on the graph to display the title. Allowed values: "top", "left", "bottom", "right" |
| font | Font to use for the title. Only works if the user has the font installed. Example: "Times New Roman" |
| fontSize | Size of the text in the title in pixels. Example: 16 |
| fontStyle | Text style to apply to the title Example: "bold" |
| color | Colour for title text in hexadecimal or rgb Example: "#f0f0f0" |
| padding | Amount of space around the title text in pixels Example: 5 |
Example
"title": "Example Graph Title",
OR
"title": {
"text": "Example Graph Title",
"position": "top",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "bold",
"color": "#fff",
"padding": 5
}
Legend Settings
Setting | Description |
|---|---|
| display | Whether to show the legend. Example: true |
| position | Where on the graph to display the legend. Allowed values: "top", "left", "bottom", "right" |
| font | Font to use for the legend items. Only works if the user has the font installed. Example: "Times New Roman" |
| fontSize | Size of the text in the legend in pixels. Example: 16 |
| fontStyle | Text style to apply to the legend. Example: "bold" |
| color | Colour for legend text in hexadecimal or RGB. Example: "#f0f0f0" |
| padding | Amount of space around the legend text in pixels. Example: 5 |
Example
"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 |
Example
"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.
Setting | Description |
|---|---|
| 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" |
Example
"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"
}
}
}
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.
Official documentation for SVGGraph
Official documentation for ChartJS
SVGGraph Example
"custom": {
"legend_columns": 3,
"legend_title_font_weight": "italic",
"legend_draggable": false
}
ChartJS Example
"custom": {
"axis": {
"scales": {
"yAxes": [{
"gridLines": {
"display": false
}
}]
}
}
}
Full example
{
"title": {
"text": "Graph Title",
"position": "top",
"font": "Times New Roman",
"fontSize": 22,
"fontStyle": "bold",
"color": "#ea22a9",
"padding": 10
},
"legend": {
"display": "true",
"position": "top",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "italic",
"color": "#ee22a9",
"padding": 5
},
"tooltips": {
"display": true,
"backgroundColor": "#eaeaea",
"font": "Times New Roman"
"fontSize": 16
"fontStyle": "bold",
"color": "#1f1f1f",
"borderRadius": 5,
"borderColor": "#ee22a9,
"borderWidth": 1,
},
"axis": {
"x": {
"display": false,
"title": {
"text": "Horizontal Axis",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "italic",
"color": "#ea22a9",
"padding": 10,
},
"grid": {
"display": true,
"color": "#eaeaea",
}
},
"y": {
"display": false,
"title": {
"text": "Vertical Axis",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "italic",
"color": "#ea22a9",
"padding": 10,
},
"grid": {
"display": true,
"color": "#eaeaea",
}
}
}
}