Totara Learn Open Discussions

Updating chart elements using Chart.js

 
WarwickJane
Updating chart elements using Chart.js
由 WarwickJane 发表于 2024年09月19日 Thursday 20:59
 

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

 
永久链接 | 回复
WarwickJane
Re: Updating chart elements using Chart.js
由 WarwickJane 发表于 2024年09月19日 Thursday 23:49
 

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"

}

}

}

}


 
永久链接 | 显示父帖子 | 回复
CooperLee
Re: Updating chart elements using Chart.js
由 CooperLee 发表于 2024年09月20日 Friday 00:45
小组 Totara小组 TXP Site Administrator

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"

}

}

 
永久链接 | 显示父帖子 | 回复
OwenKatie
Re: Updating chart elements using Chart.js
由 OwenKatie 发表于 2024年09月20日 Friday 02:44
 

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?

 
永久链接 | 显示父帖子 | 回复
CooperLee
Re: Updating chart elements using Chart.js
由 CooperLee 发表于 2024年09月20日 Friday 03:37
小组 Totara小组 TXP Site Administrator

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"

}

}


 
永久链接 | 显示父帖子 | 回复
WarwickJane
Re: Updating chart elements using Chart.js
由 WarwickJane 发表于 2024年09月22日 Sunday 15:05
 

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

 
永久链接 | 显示父帖子 | 回复
WarwickJane
Re: Updating chart elements using Chart.js
由 WarwickJane 发表于 2024年09月22日 Sunday 15:15
 

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"}

}

}

 
永久链接 | 显示父帖子 | 回复
CooperLee
Re: Updating chart elements using Chart.js
由 CooperLee 发表于 2024年09月23日 Monday 00:53
小组 Totara小组 TXP Site Administrator

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

 
永久链接 | 显示父帖子 | 回复