...
| Note |
|---|
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.
...
| Code Block |
|---|
{
"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 |
...
| Code Block |
|---|
{
"legend": {
"display": true,
"position": "left",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "bold",
"color": "fff",
"padding": 5
}
} |
Tooltip Settingssettings
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 Settingssettings
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
},
"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.
Setting | Description |
|---|---|
| colors | Colours used for the main content of a graph (e.g. different bars on a bar chart). See examples below. |
Examples
The default colours used for graph contents are shown here:
| Code Block |
|---|
{"colors" : [
"#3869B1",
"#DA7E31",
"#3F9852",
"#CC2428",
"#958C3D",
"#6B4C9A",
"#8C8C8C"
]} |
You can outline as many colours as you require in the following way:
| Code Block |
|---|
{"colors": ["#ff0000", "#00ff00", "#0000ff"]} |
Progress donut settings
Setting | Description |
|---|---|
| totalsSupplied | Enable if the second column contains totals. |
| percentageValues | Enable if the first column contains percentages instead of count. |
| colorRanges | An array of percentages determining the cut-offs for each colour. Example: [20, 100] In this example the progress bar would be red between 0% and 20%, yellow between 21% and 99%, and green at 100%. |
| backgroundColour | Set the colour of the 'empty' part of the pie chart (i.e. total minus progress value). |
Example 1
| Code Block |
|---|
{
"colors" : ["red", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
"progress": {
"totalsSupplied": true,
"percentageValues": true
}
}
} |
Example 2
| Code Block |
|---|
{
"colors" : ["red", "yellow", "green"],
"colorRanges": [20, 100],
"type" : {
"progress": {
"totalsSupplied": true,
"percentageValues": false
}
}
} |
Example 3
| Code Block |
|---|
{"colors" : ["green"],
"type" : {
"progress": {
"totalsSupplied": true,
"backgroundColor": "red"
}
}
} |
Library-specific settings
...