React-Vega - WARN Infinite extent for field "x": [Infinity, -Infinity] - reactjs

Question

The code work perfectly in the vega online editor. But there are warnings in the console while using in react component and the X-axis is not rendering in the output.
import React from 'react';
import { Vega } from 'react-vega';
import { VisualizationSpec } from 'vega-embed';
export function LineGraph() {
const specs: VisualizationSpec = {
$schema: 'https://vega.github.io/schema/vega/v5.json',
description: 'A basic line chart example.',
width: 500,
height: 200,
padding: 5,
signals: [],
data: [
{
name: 'table',
format: {
parse: { x: 'date' },
},
},
],
scales: [
{
name: 'x',
type: 'time',
range: 'width',
domain: { data: 'table', field: 'x' },
},
{
name: 'y',
type: 'linear',
range: 'height',
nice: true,
zero: true,
domain: { data: 'table', field: 'y' },
},
],
axes: [
{ orient: 'bottom', scale: 'x' },
{ orient: 'left', scale: 'y' },
],
marks: [
{
type: 'line',
from: { data: 'table' },
encode: {
enter: {
x: { scale: 'x', field: 'x' },
y: { scale: 'y', field: 'y' },
stroke: { value: 'red' },
strokeWidth: { value: 2 },
},
},
},
],
};
const data: any = {
table: [
{ x: '01-08-2020', y: 28, c: 0 },
{ x: '01-03-2020', y: 43, c: 0 },
{ x: '01-01-2020', y: 81, c: 0 },
{ x: '01-09-2020', y: 19, c: 0 },
{ x: '01-02-2020', y: 52, c: 0 },
{ x: '01-04-2020', y: 24, c: 0 },
{ x: '01-07-2020', y: 87, c: 0 },
{ x: '01-07-2020', y: 17, c: 0 },
{ x: '01-08-2020', y: 68, c: 0 },
{ x: '01-09-2020', y: 49, c: 0 },
],
};
const signalListeners = {};
return (
<div>
<Vega data={data} signalListeners={signalListeners} spec={specs} />
</div>
);
}
Warnings:
WARN Infinite extent for field "y": [Infinity, -Infinity]
WARN Infinite extent for field "x": [Infinity, -Infinity]
How to define the extent in vega?

Answer 1

There are two parts to this error - the console warning, and the lack of rendering.
The console warning gets thrown in digest cycles when the data hasn't yet been injected into the spec; not ideal, but AFAIK can be ignored.
The rendering looks to be due to an error in how react-vega handles the date parsing. Instead of passing in date as strings, first convert them to Date objects, then pass in the modified data to the Vega component.