Kendo UI Bubble Chart Background Image - Forum - Rollbase - Progress Community

Kendo UI Bubble Chart Background Image

 Forum

Kendo UI Bubble Chart Background Image

This question is answered

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.

Verified Answer
  • 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
  • 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.

  • 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}');'>




  • 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.