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?

Lipinski

Converting into Date objects resolved the rendering issue. About the console warnings, we need to provide a default dataset to the 'values' prop. So that vega finds data all the time and don't throw console warnings. – Lipinski

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.

Crucify

Converting into Date objects resolved the rendering issue. – Lipinski