Hi everyone, hi @giammariam,
I have recently started exploring Deneb Visuals. In my particular case I want to display Average Cost per Month while offering to switch between currencies on my Dashboard. So I decided to try and adapt a Deneb template for a KPI Card with a line chart, that shows the KPI for the month the user hovers over: Here is what I (almost) want it to look like:
This is what I achieved with the Template and some help by Claude and Copilot.
However, although I usually advocate for the zero-based approach to show the actual dimensions, in this case the changes month over month are so small, that the customers of this dashboard want this chart to be zoomed in on the area around the max and min values to actually see changes.
I calculated max and min boundaries (global max + 20% of the global min value & global min value - 20% of global min value) but I can't get the axis to adapt to the borders I defined. To test the functionality I wanted to provide static values first to set my boundaries and after that apply my calculated values. But even with the static values I don't get to the desired result.
When I add the following section to my y-Encoding, my generated KPI card does not display any axis anymore.
My data range is from 228 to 232, so that should well be within the defined range.
"scale": {
"zero": false,
"domain": [150,250]
},
If I use an even wider range like [80, 300] the Axis re-appears but will not use the entire range of the Line Chart anymore. Plus it also does not correctly scale the axis.
Do I have a wrong understanding of the domain attribute?
I am using Vega-Lite with a Specification- and a Config-File, I can provide both codes in full if needed.
Thanks for any help!
Hi @distra,
The area mark is designed to have a zero baseline, so even if you cut the domain, it is trying to plot the remainder of the shape outside the domain (as the second y-value is zero). It would work with a line mark as there is only a single y-coordinate to worry about.
So, what is happening here is that your y-scale and axis are being correctly set to the desired range, but the size of your chart is condensing the vertical scale into the equivalent amount of space. You can see it "kind of" working if you make the visual container larger, e.g.:
(ignore the 'undefined'; that's a copy/paste issue with your sample data at my end)
One way to resolve this is to instruct Vega-Lite to clip the area mark. You should be able to make the following changes to your spec:
1. Update the scale as follows (removing "zero": false), e.g.:
{
...
"encoding": {
"y": {
"field": "Avg Rate dynamic Currency",
"type": "quantitative",
"scale": {
"domain": [80, 235] // or whatever you need min/max to be
},
...
},
...
}
...
}
2. Update the area mark definition to include a clip as follows:
{
...
"layer": [
{
"description": "sparkline definition",
"mark": {
"type":"area",
"clip": true
},
...
},
...
}
...
}
This will now cut the baseline of the plotted area, e.g.:
Hopefully this should be all you need to resolve. Good luck!
(and thanks for using Deneb!)
Daniel
Hi @distra,
The area mark is designed to have a zero baseline, so even if you cut the domain, it is trying to plot the remainder of the shape outside the domain (as the second y-value is zero). It would work with a line mark as there is only a single y-coordinate to worry about.
So, what is happening here is that your y-scale and axis are being correctly set to the desired range, but the size of your chart is condensing the vertical scale into the equivalent amount of space. You can see it "kind of" working if you make the visual container larger, e.g.:
(ignore the 'undefined'; that's a copy/paste issue with your sample data at my end)
One way to resolve this is to instruct Vega-Lite to clip the area mark. You should be able to make the following changes to your spec:
1. Update the scale as follows (removing "zero": false), e.g.:
{
...
"encoding": {
"y": {
"field": "Avg Rate dynamic Currency",
"type": "quantitative",
"scale": {
"domain": [80, 235] // or whatever you need min/max to be
},
...
},
...
}
...
}
2. Update the area mark definition to include a clip as follows:
{
...
"layer": [
{
"description": "sparkline definition",
"mark": {
"type":"area",
"clip": true
},
...
},
...
}
...
}
This will now cut the baseline of the plotted area, e.g.:
Hopefully this should be all you need to resolve. Good luck!
(and thanks for using Deneb!)
Daniel
Hi Daniel,
thank you for reaching out, this works like a charm! I used it with the same boundaries I had provided for the example chart with native Power BI visuals and it looks great!
I was expecting it to be a simple task to replace the static values by my pre-calculated values, but it seems like Vega-Lite won't let me use the calculations in the domain directly.
I have made the following update to my transform section. Is there a way to directly reference my calculated upper and lower boundaries in the domain?
"transform": [
{
"joinaggregate": [
{
"op": "max",
"field": "Month",
"as": "max_period"
},
{
"op": "max",
"field": "Avg Rate dynamic Currency",
"as": "max_avg_rate"
},
{
"op": "min",
"field": "Avg Rate dynamic Currency",
"as": "min_avg_rate"
}
]
},
{
"calculate": "datum.max_avg_rate - datum.min_avg_rate",
"as": "delta_max_min"
},
{
"calculate": "datum.max_avg_rate + datum.delta_max_min",
"as": "upper_limit_yAxis"
},
{
"calculate": "datum.min_avg_rate - datum.delta_max_min",
"as": "lower_limit_yAxis"
}
],
Thanks a lot!
Dirk
I'm a bit short on time as it's later here, but you can do this with the extent transform, which will let you hoist your min/max to a top-level signal (called params in Vega-Lite). These are easier to access in expressions, which you can use in the scale domain.
Here's a quick, minimal example that you can use as a reference. This clips the area to the extents of the values (in conjunction with the clip approach discussed previously):
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {
"url": "data/stocks.csv"
},
"transform": [
{
"filter": "datum.symbol==='GOOG'"
},
{
"extent": "price",
"param": "y_extents"
}
],
"mark": {
"type": "area",
"clip": true
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "price",
"type": "quantitative",
"scale": {
"domain": [{"expr": "y_extents[0]"}, {"expr": "y_extents[1]"}]
}
}
}
}
You can explore this in the Vega Editor here.
The pertinent parts are as follows:
{
...
"transform": [
...
{
"extent": "price",
"param": "y_extents"
}
],
...
}
This is a calculation that will take the min/max of a specified field and store them as a variable. You can see this in the Signal pane (in either Deneb or the Vega Editor), e.g.:
This is an array that can then be referenced in the domain evaluation, e.g.:
{
"encoding": {
...
"y": {
...
"scale": {
"domain": [
{"expr": "y_extents[0]"},
{"expr": "y_extents[1]"}
]
}
}
}
}
This is an example of extraction of the direction values, but you could also use downstream params to manipulate these values (such as adding a padding factor). this is similar to a transform in a data stream.
Anyway, I hope this is clear and provides you with some ideas on how to apply it to your design. If you need me to implement your specification exactly, it would be helpful if you could supply an example .pbix file, and I can review it when I'm next back online.
Good luck!
Daniel
Thank you @v-menakakota,
all values are well within that range, these are my current values:
Maybe I did not understand the concept of layers well enough to define the axis correctly. THis is my code that defines the encoding:
"encoding": {
"y": {
"field": "Avg Rate dynamic Currency",
"type": "quantitative",
"scale": {
"zero": false,
"domain": [80,300]
},
"axis": {
"title": null,
"labels": true,
"ticks": true,
"grid": true,
"domain": true,
"labelColor": "#605E5C",
"labelFont": "Segoe UI Semibold",
"labelFontSize": 10,
"tickColor": "#E1DFDD",
"gridColor": "#F3F2F1",
"domainColor": "#E1DFDD"
}
},
"x": {
"field": "Month",
"type": "temporal"
}
},But actually, this is not defined inside the layer definitions, maybe that's the mistake?
Hi @v-menakakota,
please find the sample data in a usable format. Sorry for not providing it in this format earlier, I thought it was only needed to verify my defined y-Axis range is not too small for my actual range of values.
| __row__ | Month | MonthName | Avg Rate dynamic Currency | Avg Rate formatted |
| 0 | 2025-Jan | Jan | 232,9179259 | $ 232.92 |
| 1 | 2025-Feb | Feb | 232,1264879 | $ 232.13 |
| 2 | 2025-Mar | Mar | 232,1775412 | $ 232.18 |
| 3 | 2025-Apr | Apr | 232,0739998 | $ 232.07 |
| 4 | 2025-May | May | 230,4090975 | $ 230.41 |
| 5 | 2025-Jun | Jun | 229,1148892 | $ 229.11 |
| 6 | 2025-Jul | Jul | 230,0921796 | $ 230.09 |
| 7 | 2025-Aug | Aug | 229,7630773 | $ 229.76 |
| 8 | 2025-Sep | Sep | 229,6737823 | $ 229.67 |
| 9 | 2025-Oct | Oct | 229,8118923 | $ 229.81 |
| 10 | 2025-Nov | Nov | 229,8118923 | $ 229.81 |
| 11 | 2025-Dec | Dec | 229,8935053 | $ 229.89 |
Here is a quick summary on what I have vs. what I want to achieve:
I am very satisfied with the visual created, everything works well, besides the Y-Axis Range. By default it spans from 0 to a little above my maximum Value. As you can see in the table, my values for Avg Rate dynamic Currency are in a very small range, so the actual changes are hardly visible. So instead of the default range that should be about [0, 250], I want something like this:
This was created using a standard Line chart in Power BI. But I would prefer to use my custom Deneb visual over this one, because when I hover I immediately see the current month's value in the proper format, without needing a tooltip.
I hope this is clearer, all that's missing is the ability to set the axis on my Deneb chart to a smaller range. For the reference chart with the standard line chart I used the exact same data with a y-Axis range of [225, 235].
Hello @v-menakakota,
no problem at all, take all the time you need please.
It was my understanding that the exact code you put there would scale my y-Axis to the samE range that I had shared in my example. However, when I add it, the visual output is the following:
The y-Axis and area shading completely disappear, although the range is absolutely correct.
For your reference, I added it here:
"encoding": {
"y": {
"field": "Avg Rate dynamic Currency",
"type": "quantitative",
"scale": {
"zero": false,
"domain": [225, 235]
},
"axis": {
"title": null,
"labels": true,
"ticks": true,
"grid": true,
"domain": true,
"labelColor": "#605E5C",
"labelFont": "Segoe UI Semibold",
"labelFontSize": 10,
"tickColor": "#E1DFDD",
"gridColor": "#F3F2F1",
"domainColor": "#E1DFDD"
}
},
"x": {
"field": "Month",
"type": "temporal"
}
},
This is the encoding block after the fransforms and before the layers (please reference my full configuration in my other comment if more context is needed). If I defined it in the wrong way or position, please let me know. I am quite confused why this does not work, because I had exactly the same approach.
Thank you for your continous support!
Helpful resources
Power BI Monthly Update - August 2025
Check out the August 2025 Power BI update to learn about new features.
Fabric Community Update - August 2025
Find out what's new and trending in the Fabric community.
