title: React Charts line chart with grouped labels like months, weeks
body: <p>Is there any possibility to render a line chart with recharts with grouped points, lets say i have 6 months data series per day, about 180 days, which will represent 180 points in the chart, but the label in the X axis would show every month the data beholds to, Jan, Feb, Mar, Apr..., something like the google CRM stock.</p>
  
  <p><a href="https://i.stack.imgur.com/97Mfe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/97Mfe.png" alt="enter image description here"></a></p>
  
  <p>I have some code that formats the labels to get the month name, but it shows repeated, i want to show a single label per month.</p>
  
  <pre><code>    const formatXAxis = (tickItem) =&gt; {
  
          const d = new Date(tickItem);
          return d.toLocaleString('default', { month: 'long' });
      };
      const SimpleLineChart = React.createClass({
          render () {
              return (
          &lt;LineChart width={800} height={400} data={data}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}&gt;
         &lt;XAxis tickFormatter={formatXAxis} dataKey="name"/&gt;
         &lt;YAxis/&gt;
         &lt;CartesianGrid strokeDasharray="3 3"/&gt;
         &lt;Tooltip/&gt;
         &lt;Legend /&gt;
         &lt;Line type="monotone" dataKey="uv" stroke="#8884d8" activeDot={{r: 8}}/&gt;
        &lt;/LineChart&gt;
      );
    }
  })
  
  ReactDOM.render(
    &lt;SimpleLineChart /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/D8ROt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D8ROt.png" alt="enter image description here"></a></p>