...
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
| 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 |
Example
| Code Block |
|---|
"legend": {
"display": true,
"position": "left",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "bold",
"color": "fff",
"padding": 5
}, |
...
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
| Code Block |
|---|
"tooltips": {
"display": true,
"backgroundColor": "#ddd",
"font": "Times New Roman",
"fontSize": 16,
"fontStyle": "bold",
"color": "#fff",
"borderRadius": 5,
"borderColor": "#0a7b92",
"borderWidth": 3,
}, |
...
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
| 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"
}
}
} |
...
Official documentation for ChartJS
SVGGraph Example
| Code Block |
|---|
"custom": {
"legend_columns": 3,
"legend_title_font_weight": "italic",
"legend_draggable": false
} |
...
| Code Block |
|---|
"custom": {
"axis": {
"scales": {
"yAxes": [{
"gridLines": {
"display": false
}
}]
}
}
} |
Full example
| Code Block |
|---|
{
"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",
}
}
}
} |