- Power BI forums
- Updates
- News & Announcements
- Get Help with Power BI
- Desktop
- Service
- Report Server
- Power Query
- Mobile Apps
- Developer
- DAX Commands and Tips
- Custom Visuals Development Discussion
- Health and Life Sciences
- Power BI Spanish forums
- Translated Spanish Desktop
- Training and Consulting
- Instructor Led Training
- Dashboard in a Day for Women, by Women
- Galleries
- Community Connections & How-To Videos
- COVID-19 Data Stories Gallery
- Themes Gallery
- Data Stories Gallery
- R Script Showcase
- Webinars and Video Gallery
- Quick Measures Gallery
- 2021 MSBizAppsSummit Gallery
- 2020 MSBizAppsSummit Gallery
- 2019 MSBizAppsSummit Gallery
- Events
- Ideas
- Custom Visuals Ideas
- Issues
- Issues
- Events
- Upcoming Events
- Community Blog
- Power BI Community Blog
- Custom Visuals Community Blog
- Power BI 中文博客
- Community Support
- Community Accounts & Registration
- Using the Community
- Community Feedback

Turn on suggestions

Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.

Showing results for

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

- Power BI forums
- Forums
- Get Help with Power BI
- Custom Visuals Development Discussion
- Re: How to apply color gradient for bubble inside ...

Topic Options

- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content

How to apply color gradient for bubble inside custom visualization developed using Deneb

04-17-2023
07:51 AM

@giammariam hi could you help me in this code, i would like to swap the axis, but more than that the color of the bubble should change not as per the size of the bubble, but instead we should use a color gradient. For eg:"If the residual Impact is "Very Low" and residual probability is "Very Low" it should be Green and if it is high it should be Red. i will show you an example

Here i have used a background, but i want the color change inside the bubble and the backgroud should be white. For the visualisation i used i have made the bubble fill color as transperent. Is it possible to change the colors of the bubble just like the background.

Here is the Link for the sample data set

Solved! Go to Solution.

1 ACCEPTED SOLUTION

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content

04-20-2023
10:07 AM

Hey @Junato47, because of the limited clippath settings available, I could not figure out a way to have the gradient be confined to just the circles. However, I was able to calaculate a single color for each bubble with a close match of the gradient based on the position in the matrix. Let me know if the following will suffice.

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

Interactive gist

spec:

```
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 800,
"transform": [
{
"aggregate": [{"op": "count", "as": "count_of_risk_id"}],
"groupby": ["Residual Impact", "Residual Probability"]
},
{"window": [{"op": "row_number", "as": "index"}]},
{
"calculate": "indexof(x_domain, datum['Residual Probability'])",
"as": "x_index"
},
{
"calculate": "indexof(y_domain, datum['Residual Impact'])",
"as": "y_index"
},
{"calculate": "datum['y_index']+datum['x_index']", "as": "gradient_index"},
{
"joinaggregate": [
{"op": "min", "field": "gradient_index", "as": "min_gradient_index"},
{"op": "max", "field": "gradient_index", "as": "max_gradient_index"}
]
},
{
"calculate": "datum['gradient_index']/(gradient_index_domain_max-gradient_index_domain_min)",
"as": "color_percentage"
},
{
"calculate": "datum['gradient_index']===gradient_index_domain_min ? 0 : datum['gradient_index'] === gradient_index_domain_max ? length(color_domain) - 1 : datum['color_percentage'] <= 0.25 ? 1 : datum['color_percentage'] >= 0.75 ? length(color_domain) - 2 : 2",
"as": "color_index"
},
{"calculate": "color_range[datum['color_index']]", "as": "color"}
],
"params": [
{
"name": "x_domain",
"value": ["Very Low", "Low", "Medium", "High", "Very High"]
},
{
"name": "y_domain",
"value": ["Very Low", "Low", "Medium", "High", "Very High"]
},
{"name": "gradient_index_domain_min", "value": 0},
{
"name": "gradient_index_domain_max",
"expr": "length(x_domain) + length(y_domain) - 2"
},
{
"name": "color_range",
"value": [
"rgb(0,255,0)",
"rgb(165,255,0)",
"rgb(255,255,0)",
"rgb(255,165,0)",
"rgb(255,0,0)"
]
},
{"name": "color_domain", "expr": "sequence(0,length(color_range), 1)"}
],
"encoding": {
"x": {
"field": "Residual Probability",
"type": "ordinal",
"axis": {"labelAngle": 0},
"scale": {"domain": {"expr": "x_domain"}}
},
"y": {
"field": "Residual Impact",
"type": "nominal",
"scale": {"domain": {"expr": "y_domain"}, "reverse": true}
}
},
"layer": [
{
"mark": {"type": "point", "size": 1000, "tooltip": true, "filled": true},
"encoding": {
"size": {
"field": "count_of_risk_id",
"legend": null,
"scale": {"rangeMax": 15000},
"type": "quantitative"
},
"color": {"field": "color", "legend": null, "scale": null}
}
},
{
"mark": {
"type": "text",
"fontSize": 16,
"fontWeight": 400,
"color": "black"
},
"encoding": {
"text": {"field": "count_of_risk_id", "type": "quantitative"}
}
}
],
"data": {
"name": "dataset",
"values": [
{
"Risk ID": "1",
"Residual Impact": "Low",
"Residual Probability": "High"
},
{
"Risk ID": "2",
"Residual Impact": "Very High",
"Residual Probability": "High"
},
{
"Risk ID": "3",
"Residual Impact": "Medium",
"Residual Probability": "Very Low"
},
{
"Risk ID": "4",
"Residual Impact": "Medium",
"Residual Probability": "Very Low"
},
{
"Risk ID": "5",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "6",
"Residual Impact": "Medium",
"Residual Probability": "Medium"
},
{
"Risk ID": "7",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "8",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "9",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "10",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "11",
"Residual Impact": "Low",
"Residual Probability": "High"
},
{
"Risk ID": "12",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "13",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "14",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "15",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "16",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "17",
"Residual Impact": "Medium",
"Residual Probability": "Medium"
},
{
"Risk ID": "18",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "19",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "20",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "21",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "22",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "23",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "24",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "25",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "26",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "27",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "28",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "29",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "30",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "31",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "32",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "33",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "34",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "35",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "36",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "37",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "38",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "39",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "40",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "41",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "42",
"Residual Impact": "Low",
"Residual Probability": "Low"
},
{
"Risk ID": "43",
"Residual Impact": "Medium",
"Residual Probability": "Low"
},
{
"Risk ID": "44",
"Residual Impact": "Medium",
"Residual Probability": "Very High"
},
{
"Risk ID": "45",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "46",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "47",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "48",
"Residual Impact": "Very High",
"Residual Probability": "Very High"
},
{
"Risk ID": "49",
"Residual Impact": "Very Low",
"Residual Probability": "Very Low"
}
]
}
}
```

Proud to be a Super User 😄

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

3 REPLIES 3

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content

04-20-2023
10:07 AM

Hey @Junato47, because of the limited clippath settings available, I could not figure out a way to have the gradient be confined to just the circles. However, I was able to calaculate a single color for each bubble with a close match of the gradient based on the position in the matrix. Let me know if the following will suffice.

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

Interactive gist

spec:

```
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 800,
"transform": [
{
"aggregate": [{"op": "count", "as": "count_of_risk_id"}],
"groupby": ["Residual Impact", "Residual Probability"]
},
{"window": [{"op": "row_number", "as": "index"}]},
{
"calculate": "indexof(x_domain, datum['Residual Probability'])",
"as": "x_index"
},
{
"calculate": "indexof(y_domain, datum['Residual Impact'])",
"as": "y_index"
},
{"calculate": "datum['y_index']+datum['x_index']", "as": "gradient_index"},
{
"joinaggregate": [
{"op": "min", "field": "gradient_index", "as": "min_gradient_index"},
{"op": "max", "field": "gradient_index", "as": "max_gradient_index"}
]
},
{
"calculate": "datum['gradient_index']/(gradient_index_domain_max-gradient_index_domain_min)",
"as": "color_percentage"
},
{
"calculate": "datum['gradient_index']===gradient_index_domain_min ? 0 : datum['gradient_index'] === gradient_index_domain_max ? length(color_domain) - 1 : datum['color_percentage'] <= 0.25 ? 1 : datum['color_percentage'] >= 0.75 ? length(color_domain) - 2 : 2",
"as": "color_index"
},
{"calculate": "color_range[datum['color_index']]", "as": "color"}
],
"params": [
{
"name": "x_domain",
"value": ["Very Low", "Low", "Medium", "High", "Very High"]
},
{
"name": "y_domain",
"value": ["Very Low", "Low", "Medium", "High", "Very High"]
},
{"name": "gradient_index_domain_min", "value": 0},
{
"name": "gradient_index_domain_max",
"expr": "length(x_domain) + length(y_domain) - 2"
},
{
"name": "color_range",
"value": [
"rgb(0,255,0)",
"rgb(165,255,0)",
"rgb(255,255,0)",
"rgb(255,165,0)",
"rgb(255,0,0)"
]
},
{"name": "color_domain", "expr": "sequence(0,length(color_range), 1)"}
],
"encoding": {
"x": {
"field": "Residual Probability",
"type": "ordinal",
"axis": {"labelAngle": 0},
"scale": {"domain": {"expr": "x_domain"}}
},
"y": {
"field": "Residual Impact",
"type": "nominal",
"scale": {"domain": {"expr": "y_domain"}, "reverse": true}
}
},
"layer": [
{
"mark": {"type": "point", "size": 1000, "tooltip": true, "filled": true},
"encoding": {
"size": {
"field": "count_of_risk_id",
"legend": null,
"scale": {"rangeMax": 15000},
"type": "quantitative"
},
"color": {"field": "color", "legend": null, "scale": null}
}
},
{
"mark": {
"type": "text",
"fontSize": 16,
"fontWeight": 400,
"color": "black"
},
"encoding": {
"text": {"field": "count_of_risk_id", "type": "quantitative"}
}
}
],
"data": {
"name": "dataset",
"values": [
{
"Risk ID": "1",
"Residual Impact": "Low",
"Residual Probability": "High"
},
{
"Risk ID": "2",
"Residual Impact": "Very High",
"Residual Probability": "High"
},
{
"Risk ID": "3",
"Residual Impact": "Medium",
"Residual Probability": "Very Low"
},
{
"Risk ID": "4",
"Residual Impact": "Medium",
"Residual Probability": "Very Low"
},
{
"Risk ID": "5",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "6",
"Residual Impact": "Medium",
"Residual Probability": "Medium"
},
{
"Risk ID": "7",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "8",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "9",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "10",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "11",
"Residual Impact": "Low",
"Residual Probability": "High"
},
{
"Risk ID": "12",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "13",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "14",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "15",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "16",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "17",
"Residual Impact": "Medium",
"Residual Probability": "Medium"
},
{
"Risk ID": "18",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "19",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "20",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "21",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "22",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "23",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "24",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "25",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "26",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "27",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "28",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "29",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "30",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "31",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "32",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "33",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "34",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "35",
"Residual Impact": "High",
"Residual Probability": "Low"
},
{
"Risk ID": "36",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "37",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "38",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "39",
"Residual Impact": "High",
"Residual Probability": "Medium"
},
{
"Risk ID": "40",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "41",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "42",
"Residual Impact": "Low",
"Residual Probability": "Low"
},
{
"Risk ID": "43",
"Residual Impact": "Medium",
"Residual Probability": "Low"
},
{
"Risk ID": "44",
"Residual Impact": "Medium",
"Residual Probability": "Very High"
},
{
"Risk ID": "45",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "46",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "47",
"Residual Impact": "Medium",
"Residual Probability": "High"
},
{
"Risk ID": "48",
"Residual Impact": "Very High",
"Residual Probability": "Very High"
},
{
"Risk ID": "49",
"Residual Impact": "Very Low",
"Residual Probability": "Very Low"
}
]
}
}
```

Proud to be a Super User 😄

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content

11-27-2023
01:22 PM

Hello, I would like to input an variable horizontal line into a bubble chart and I do not have a glue how to do it. For example the horizontal line for the green category should be at the y axes level of 40 and for category red on the lebel of 20. Could you help me with that question ? Best regards Benjamin

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content

Announcements

Check out the September 2024 Power BI update to learn about new features.

Learn from experts, get hands-on experience, and win awesome prizes.

Top Solution Authors

User | Count |
---|---|

27 | |

11 | |

8 | |

6 | |

6 |