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

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.