Totara Learn Open Discussions

Updating chart elements using Chart.js

Welcome to this forum!

Hello

Has anyone managed to update graph elements specific to a graph, using chart.js?

I've added some custom code, which appears to work well at the chart level - colours and legend settings.

However, I can't seem to get changes for anything specific to a chart type. What we would really like to do is set the width of a bar chart and have a smaller inside circle (cutout) for a donut.

The specific donut settings are here:

Doughnut and Pie Charts | Chart.js (chartjs.org)

but whatever combination of syntax I use, it just doesn't seem to make any difference (including starting with 'Custom').

Any help would be appreciated.

thanks

Jane

Permalink | Reply

I have got some of the custom code working, although not the cutout. This code works - so replacing 'options' in the chart.js documentation with 'custom'.

e.g. options.elements.arc becomes the below. But these are the only two of the options that I have got to work so far.

{

"custom": {

"elements": {

"arc": {

"borderColor": "#95c121",

"borderWidth": "5"

}

Permalink | Show parent | Reply

I'm not very adept with code Jane, but just in case you didn't see this in the release notes…

Some good news for administrators who love graphs! You can now add a persistent colour to the categories/status of the graph segments. What does that mean? Well here's a quick video

https://www.loom.com/share/e0dd8a97a0ae4563bb4518186d95045c?sid=f3c24604-b4b1-4431-9c5e-a8a14dfab21a

and here is the code I used in the video. Happy colouring!

{

"categoryColors": {

"Not certified": "#FF5C5C",

"In progress": "#FFBF00",

"Certified": "#238823",

"Expired": "#D2222D"

}

Permalink | Show parent | Reply

Hi Lee

Thanks for the above I have tried it my end but it doesn't seem to work. Is it only for version 18?

Permalink | Show parent | Reply

As of Totara 17.28 it is possible to specify colours to be associated with specific datasets using both ChartJS and SVGGraph, so it could be all the spaces that are added when I pasted it in. I tested again with no line spaces and it worked

{

"categoryColors": {

"Not certified": "#FF5C5C",

"In progress": "#FFBF00",

"Certified": "#238823",

"Expired": "#D2222D"

}

Permalink | Show parent | Reply

Thanks for adding that Lee, yes we did see that. We found it really useful as we wanted to have Complete and Complete via RPL the same colour in our mandatory learning chart

Permalink | Show parent | Reply

I also managed to set the maximum thickness for the bar width - code below if anyone else needs to use it. This is set at the data series level

{

"data-settings": {

"0": {

"fill": true,

"backgroundColor": "#95C121",

"maxBarThickness": "50"},

"1": {

"fill": true,

"backgroundColor": "#DCDCDC",

"maxBarThickness": "50"}

}

Permalink | Show parent | Reply

That's actually a great idea Jane. Never even thought of that! Thank you

Permalink | Show parent | Reply