This is a migrated thread and some comments may be shown as answers.

It's possible to add opacity to a bubble?

3 Answers 26 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 18 Nov 2013, 09:03 AM
Hi,

I am using the Bubble chart, could be possible to add opacity to each bubble?

I would like to modify the opacity of each bubble to create a dinamicaly "trail" with the same bubble with different values.

Thanks,
Luis

3 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 18 Nov 2013, 03:23 PM
Hi Luis - I've got the same question here, was just searching on the forums!

I cannot see how to do this.  Is it possible as I really need it !!

I can see two solutions that would be great if possible - one against an entire series as defaults, or secondly, per data item,

So either a formula on opacity ....
$("#chart").kendoChart({
    seriesDefaults: {
        type:"bubble",
        bubble: {
          color: "#4DC0BD",
          opacity: (size/100)
        }
    },
    series: [{
        data: [
        { x:100, y:200, size:100, category: "first" },
        { x:200, y:140, size:140, category: "second" } .....
Or a value in the series data -
$("#chart").kendoChart({
    legend: {
        visible: false
    },
    seriesDefaults: {
        type:"bubble",
        bubble: {
          color: "#4DC0BD",
          opacity: 0.5
        }
    },
    series: [{
        data: [
        { x:100, y:200, size:100, category: "first", opacity:0.5 },
        { x:200, y:140, size:140, category: "second", opacity:0.6 } .....
0
Iliana Nikolova
Telerik team
answered on 19 Nov 2013, 02:55 PM
Hi guys,

I am afraid there is no an opacity property for each point in Kendo UI Bubble chart, however there is a colorField option which could help to achieve the desired result (using RGBA colors). For your convenience here is a simple jsBin example which demonstrates the suggest approach in action.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 19 Nov 2013, 06:13 PM
That works really well - thank you for a quick reply! :-)
Tags
Charts
Asked by
Luis
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or