I am trying to render a line chart using vega-lite in my react app. It gets rendered as follows:
As per the specs it should get rendered as follows (notice the circular data points in green line chart):
I copy pasted the spec in vega editor and it rendered correctly as above. You can try it in this vega editor
Here is the full spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"date": "Apr 05 22",
"total": 15,
"threadsCount": 6,
"commentsCount": 9
},
{
"date": "Jan 20 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 02 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 20 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Mar 03 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 13 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 31 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 19 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 01 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 25 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 06 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 24 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 21 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 14 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 04 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Apr 01 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 20 22",
"total": 3,
"threadsCount": 1,
"commentsCount": 2
},
{
"date": "Mar 16 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 21 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 15 22",
"total": 1,
"threadsCount": 0,
"commentsCount": 1
},
{
"date": "Mar 15 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 19 22",
"total": 5,
"threadsCount": 2,
"commentsCount": 3
},
{
"date": "Jan 29 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 22 22",
"total": 3,
"threadsCount": 1,
"commentsCount": 2
},
{
"date": "Jan 27 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 07 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 03 22",
"total": 2,
"threadsCount": 0,
"commentsCount": 2
},
{
"date": "Feb 14 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Feb 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 07 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 12 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 26 22",
"total": 2,
"threadsCount": 0,
"commentsCount": 2
},
{
"date": "Apr 02 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Feb 15 22",
"total": 6,
"threadsCount": 1,
"commentsCount": 5
},
{
"date": "Apr 08 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 12 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 31 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Mar 23 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
}
]
},
"width": "container",
"vconcat": [
{
"layer": [
{
"width": 680,
"height": 250,
"mark": {
"type": "line",
"color": "green"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"param": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "total",
"type": "quantitative",
"title": "Number of comments & threads created"
}
}
},
{
"width": 680,
"height": 250,
"mark": {
"type": "circle",
"color": "green",
"opacity": "55%"
},
"params": [
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"param": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "total",
"type": "quantitative"
},
"tooltip": [
{
"field": "date",
"type": "temporal",
"title": "Date"
},
{
"field": "threadsCount",
"type": "quantitative",
"title": "Threads Created"
},
{
"field": "commentsCount",
"type": "quantitative",
"title": "Comments Created"
}
],
"size": {
"condition": {
"param": "highlight",
"empty": false,
"value": 170
},
"value": 50
}
}
}
]
},
{
"layer": [
{
"width": 680,
"height": 60,
"mark": {
"type": "line",
"strokeWidth": "2px"
},
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"encodings": [
"x"
]
}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "(Select duration in lower chart to zoom in. Double click to reset zoom.)"
},
"y": {
"field": "total",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false
},
"title": ""
}
}
}
]
}
]
}
What might be wrong?
