title: unable to add x-axis label name for the graph (svg graph)
body: <p>I have this codepen <a href="https://codepen.io/a166617/pen/NWvZGLd" rel="nofollow noreferrer">https://codepen.io/a166617/pen/NWvZGLd</a> and i am trying to put an x-axis label for the graph. As you can see, the y-axis label has 0,25,50,75,100 shown. These are static values. But the x-axis label names are dynamic and i am not able to put the label names.</p>
  <p>I tried putting this line of code <code>&lt;div style={xtitle}&gt;{entry.name}&lt;/div&gt;</code> into below code as follows but i cannot see the x-axis label. can someone please suggest where i am going wrong.</p>
  <pre><code>const rows = (entry, rowIndex) =&gt; {
      return entry.bars.map((bar, index) =&gt; {
        console.log('bar', entry, bar)
        const graphHeight = 490 - 5;
        const height = (bar.value / entry.total) * graphHeight;
        const y = (bar.y / entry.total) * graphHeight;
        return (
          &lt;&gt;
          &lt;g key={Math.random()}&gt;
            &lt;rect
              width={50}
              height={height}
              fill={bar.color}
              x={100 + rowIndex * 60} // multiply with the width (50) + 10 for space
              y={490 - y - height}
            /&gt;
            &lt;text
              x={125 + rowIndex * 60}                // visible centre point of your bar
              y={490 - y - height/2}
              dy=&quot;0.5em&quot;            // adjusts the text y position to adjust for text descenders.
              textAnchor=&quot;middle&quot;   // centre the text horizontall at x
              class=&quot;bar-label&quot; 
              style={{ fill: 'white',
    fontSize: '12px' }}// styling for this text 
              &gt;{`${bar.color === '#ffcc00' &amp;&amp; bar.value === 100 ? 'X': bar.value}`}&lt;/text&gt;
            &lt;/g&gt;
            &lt;div style={xtitle}&gt;{entry.name}&lt;/div&gt; 
          &lt;/&gt;
        );
      });
    };
  </code></pre>
  <p>I am trying to achieve the end result as this screenshot. The screenshot has x-axis label names as 'Tom, Emma, Lucy, Kim, Steve'. Similarly, i am trying to show x-axis label on my codepen.</p>
  <p><a href="https://i.stack.imgur.com/o1V85.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o1V85.png" alt="enter image description here" /></a></p>