title: Why Recharts draws undefined category on yAxis?
body: <p>Can't figure why <code>recharts</code> draws some <code>undefined</code> category on <code>yAxis</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/wa1vp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wa1vp.png" alt="enter image description here"></a></p>
  
  <p>Here is a link to JSFiddle: <a href="http://jsfiddle.net/liubko/x1yoboc7/455/" rel="nofollow noreferrer">http://jsfiddle.net/liubko/x1yoboc7/455/</a></p>
  
  <pre><code>const data = [
    {name: '01-01', alice: "alice"},
    {name: '01-02', alice: "alice", aliceActive: "alice"},
    {name: '01-03', bob: "bob", alice: "alice", aliceActive: "alice"},
    {name: '01-04', bob: "bob", alice: "alice", aliceActive: "alice"},
    {name: '01-05', bob: "bob", bobActive: "bob", alice: "alice"},
    {name: '01-06', bob: "bob", bobActive: "bob", alice: "alice"},
  ];
  
  const categories = ["alice", "bob"];
  const SimpleLineChart = React.createClass({
    render () {
      return (
        &lt;LineChart width={600} height={300} data={data}&gt;
          &lt;XAxis dataKey="name" /&gt;
          &lt;YAxis type="category" /&gt;            
          {categories.map(cat =&gt;
            [
              &lt;Line type="step" dataKey={cat} stroke="yellow" /&gt;,
              &lt;Line type="step" dataKey={`${cat}Active`} stroke="green" /&gt;,
            ]
          )}            
        &lt;/LineChart&gt;
      );
    }
  })
  </code></pre>
  
  <p><em>I want to have a chart consists of straight horizontal lines. xAxis - is <code>time</code>. yAxis - is a <code>user</code>. But each user can be in a different state through time.</em> </p>