...
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 } }, |
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
| 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.
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" } } } } |
Library-specific settings
...
SVGGraph Example
| Code Block |
|---|
{ "custom": { "legend_columns": 3, "legend_title_font_weight": "italic", "legend_draggable": false false } } |
ChartJS Example
| Code Block |
|---|
{ "custom": { "axis": { "scales": { "yAxes": [{ "gridLines": { "display": false } }] } 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",
}
}
}
} |