Forum Discussion
Dynamic y-Axis calculation with Deneb
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
Vega Lite Specification
{
"description": "Area chart with text updated when hovering over a point. Author: Joanna Sekiewicz",
"title": "Average Rate by Month",
"data": {"name": "dataset"},
"transform": [
{
"joinaggregate": [
{
"op": "max",
"field": "Month",
"as": "max_period"
}
]
},
{
"calculate": "datum.max_avg_rate + datum.min_avg_rate * 0.4",
"as": "upper_limit_yAxis"
},
{
"calculate": "datum.min_avg_rate + datum.min_avg_rate * 0.4",
"as": "lower_limit_yAxis"
}
],
"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"
}
},
"layer": [
{
"description": "sparkline definition",
"mark": "area",
"encoding": {
"y": {"field": "Avg Rate dynamic Currency"}
}
},
{
"description": "points activated by hovering over",
"params": [
{
"name": "hoverPoint",
"select": {
"type": "point",
"on": "pointermove",
"encodings": ["x"],
"clear": "pointerout",
"nearest": true
}
}
],
"encoding": {
"y": {"field": "Avg Rate dynamic Currency"},
"opacity": {"value": 0}
},
"mark": {"type": "point"}
},
{
"description": "details for hovered point (or the last one)",
"transform": [
{
"calculate": "isDefined(hoverPoint.Month) ? hoverPoint.Month[0] == datum.Month : datum.Month==datum.max_period",
"as": "displayDetails"
},
{
"filter": "datum.displayDetails"
}
],
"layer": [
{
"description": "point referring to displayed details",
"mark": "point",
"encoding": {
"opacity": {"value": 1},
"y": {"field": "Avg Rate dynamic Currency"}
}
},
{
"mark": "rule",
"encoding": {
"opacity": {
"condition": {
"param": "hoverPoint",
"empty": false,
"value": 1
},
"value": 0
}
}
},
{
"mark": {
"type": "text",
"size": 28,
"fontWeight": "normal",
"color": "#2D7A89"
},
"encoding": {
"text": {
"field": "Avg Rate formatted"
},
"x": {"value": -10},
"y": {"value": -50}
}
},
{
"mark": {
"type": "text",
"size": 13
},
"encoding": {
"text": {
"field": "Month",
"format": "%b-%Y",
"formatType": "time"
},
"x": {"value": -10},
"y": {"value": -25}
}
}
]
}
]
}
Config
{
"view": {
"stroke": "transparent",
"fill": "transparent"
},
"font": "Segoe UI semibold",
"area": {
"line": true,
"interpolate": "monotone",
"color": {
"gradient": "linear",
"x1": 1,
"y1": 1,
"x2": 1,
"y2": 0,
"stops": [
{"offset": 0, "color": "#ffffff00"},
{
"offset": 1,
"color": "#2D7A89A0"
}
]
}
},
"rule": {
"strokeWidth": 0.3,
"color": "grey"
},
"line": {
"interpolate": "monotone",
"color": "#2D7A89",
"strokeWidth": 3,
"strokeCap": "round",
"strokeJoin": "round"
},
"point": {
"filled": true,
"size": 85,
"color": "#2D7A89"
},
"text": {
"align": "left",
"fill": "#605E5C"
},
"axis": {
"title": null,
"labels": false,
"ticks": false,
"grid": false,
"domain": false
},
"title": {
"anchor": "start",
"dx": 0,
"dy": -8,
"fontSize": 18.5,
"fontWeight": "bold",
"color": "#252423"
}
}