React-vis: Bar Charts Not Rendering (again, possibly D3?)

[NewETown]

I'm attempting to render a horizontal bar chart with text labels on the Y axis instead of numeric labels. Numeric labels are working fine but strings appear to cause D3 errors with this message:

Error: <rect> attribute x: Expected length, "NaN".

Might be related to https://github.com/uber/react-vis/issues/184 ?

Here's the data I'm using. For the sake of completeness I've tried both horizontal and vertical bar charts and swapped the values for X and Y for both, none of that seems to change the error.

 <XYPlot
      width={450}
      height={300}>
      <VerticalBarSeries
        data={[
          { x: 10, y: 'bob', label: 'bob' },
          { x: 20, y: 'frank', label: 'frank'},
          { x: 10, y: 'eddie', label: 'eddie'},
          { x: 30, y: 'marge', label: 'marge'},
        ]}
        onValueMouseOver={(d) => {console.log(d);}} />
        <XAxis />
        <YAxis />
    </XYPlot>

And here are the packages being installed by NPM. I noticed that they're different from the Yarn file in the responsive vis sample (https://github.com/uber/react-vis/blob/master/examples/responsive-vis/responsive-vis-utils.js):

└─┬ [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├─┬ [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ └─┬ [email protected] 
│   └── [email protected] 
├─┬ [email protected] 
│ ├── [email protected] 
│ ├── [email protected] 
│ └── [email protected] 
├─┬ [email protected] 
│ └── [email protected] 
├── [email protected] 
└─┬ [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  └── [email protected]

I've tried the latest beta release as well as versions all the way back to 1.3, same message. This makes me think it's D3 but I'm not sure how to resolve the problem without switching package managers and forcing the proper versions of D3.

[mcnuttandrew]

Hey @NewETown

If I understand you right, you are try to make HorizontalBarSeries. In order to get such a thing to render given your current data, you need to to switch the VerticalBarSeries to a horizontal one, and mark the y scale type as ordinal, like so:

          <XYPlot
                yType={'ordinal'}
                width={450}
                height={300}>
                <HorizontalBarSeries
                  data={[
                    {x: 10, y: 'bob'},
                    {x: 20, y: 'frank'},
                    {x: 10, y: 'eddie'},
                    {x: 30, y: 'marge'}
                  ]}
                  onValueMouseOver={(d) => {console.log(d);}} />
                  <XAxis />
                  <YAxis />
              </XYPlot>

This generates an image like

[NewETown]

@mcnuttandrew Aha! I hadn't marked the Y axis as ordinal, I completely missed this in the sample code:

yType="ordinal"
xType="linear"

Thanks for the catch