Kendo UI Bubble Chart Background Image

Posted by Lenn Smink on 01-Dec-2016 08:35

Hi all,

I'm using the Kendo UI Bubble Chart for a good overview of risklevels related to a project, now it's only displaying different bubbles with different sizes.

I want to set a background image to the chart area, I found some examples on the Telerik website but that didn't worked for me. 

I also want to change the colors of the plot bands and the bubbles but there was no difference after updating the color codes.

I already cleared my cache and tried it on multiple webbrowsers.

Hope someone could help me out.

Posted by Ruben Dröge on 01-Dec-2016 09:46

It's not possible to set the background image of a bubble chart using the chartArea property of the bubble chart.
But what you can do is make the background transparent:

chartArea: {
     background:  "transparent"
},


And after that you can add the background to your <div>:
<div class="chart" id="chart" style='background: center no-repeat url('{!#HOSTED_FILE.ggHo1f4TRqKyvIhTWrlxuQ}');'>




All Replies

Posted by Vimalkumar Selvaraj on 01-Dec-2016 08:41

Hi Lenn,

Could you share code that you are using to generate chart?. Would be helpful if you can share Rollbase sample app which include your code for generating chart, we could see if there are any issues ,  fix them and share it again with you.

Thanks,

Vimal.

Posted by Ruben Dröge on 01-Dec-2016 09:46

It's not possible to set the background image of a bubble chart using the chartArea property of the bubble chart.
But what you can do is make the background transparent:

chartArea: {
     background:  "transparent"
},


And after that you can add the background to your <div>:
<div class="chart" id="chart" style='background: center no-repeat url('{!#HOSTED_FILE.ggHo1f4TRqKyvIhTWrlxuQ}');'>




Posted by Ruben Dröge on 01-Dec-2016 09:50

With regards to the colors of the bubbles, those are related to your data points.

This means you can add a 'color' value to the array that you use as your Kendo dataSource and it will display the bubble in that color.

This thread is closed