Gradient background for chartjs

Answered
0
0

Hi there,

Would it be possible to add the ability to set a vertical or horizontal gradient (start/end) background color to chartjs?

As far as I can see, it only supports a solid backcolor.

Thank you

Darren

  • You must to post comments
Best Answer
0
0

Yes but you have to do it using a css class.

  • Drop a StyleSheet extender on your page/form.
  • Add a css class with the gradient background color you like
  • Set the CssClass on the ChartJs widget.

Example of css class text to set on the StyleSheet:

“.gradient {background: linear-gradient(red, yellow);}”

Then set the CssClass property to “gradient” (without the dot).

https://www.w3schools.com/css/css3_gradients.asp

 

 

  • Darren
    Thank you. Would you mind posting an actual example please? I’m a desktop dev. & am not familiar with web techniques! Can this kind of styling not be defined in the theme? I will need many charts added programmatically, how do I go about applying the same gradient to each chart? Thanks
  • Darren
    OK, got it. However, I don’t think I could have worked it out without your dropshadow example. Superb! :-)
  • Darren
    Actually, one slight annoyance: Assigning the stylesheet on page_load, you see the gradient background rectangle first, then a second or so later the graph appears. Looks a bit odd. Any way to show all at once? Thanks
  • You must to post comments
0
0

You can set the gradient style in a css file and add it to Default.html like any css file. Looks like a class you can use is “.chartjs-render-monitor”. You can find out by inspecting the html with chrome and F12.

.chartjs-render-monitor {

background-color: red;

}

This will apply to all chartjs widgets.

The delay between the display of the element and the chart is normal. It has to receive the data. There may be ways to draw the chart after the data is received, but it requires changing the javascript initialization. The chartjs extension is open source so it can be modified and adapted to best fit the project.

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.