CODEWITHSUNDEEP
reactjsvega-lite
Paul Butcher
Paul Butcher

Reputation: 10852

Passing data to react-vega

I'm just getting started with react-vega and fear I may be missing something very basic. It works perfectly when I have embedded data, but I get very different behaviour when I pass the data to the component.

So this works exactly as I would expect:

function App() {
  const spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
      "values": [
        {"ElapsedTime": 0.0017, "RPM": 11700},
        {"ElapsedTime": 0.005, "RPM": 11940},
        {"ElapsedTime": 0.0083, "RPM": 12000}
      ]
    },
    "mark": "line",
    "encoding": {
      "x": {"field": "ElapsedTime", "type": "quantitative"},
      "y": {"field": "RPM", "type": "quantitative"}
    }
  };

  return (
    <Vega spec={spec} />
  );
}

Giving the following result:

correct

I would expect that the following would give exactly the same result:

function App() {
  const spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {"name": "table"},
    "mark": "line",
    "encoding": {
      "x": {"field": "ElapsedTime", "type": "quantitative"},
      "y": {"field": "RPM", "type": "quantitative"}
    }
  };

  const data = {
    "table": [
      {"ElapsedTime": 0.0017, "RPM": 11700},
      {"ElapsedTime": 0.005, "RPM": 11940},
      {"ElapsedTime": 0.0083, "RPM": 12000}
    ]
  }

  return (
    <Vega spec={spec} data={data} />
  );
}

But it generates this instead:

incorrect

(note the missing legends and truncated axis labels). Furthermore it gives the following warnings in the console:

WARN – "Infinite extent for field \"ElapsedTime\": [Infinity, -Infinity]"
WARN – "Infinite extent for field \"RPM\": [Infinity, -Infinity]"

I am missing something very basic, I'm sure, but I'm at a loss to understand what.

Upvotes: 1

Views: 844

Answers (1)

user2840784
user2840784

Reputation: 81

This can re resolved by specifying autosize in spec.

const spec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "autosize": {
        "resize": true
    }
    ...
}

Upvotes: 1

Related Questions