Show Date/time in x axis using react d3

Question

I am very new in to react js. I want to show the date/time in the x axis of my graph. I have follow all the steps from

https://github.com/react-d3/react-d3-tooltip

I got the below error:

DOMPropertyOperations.js?930e:147 Error: <path> attribute d: Expected number, "MNaN,31.627906976…".

Here is my code:

render() {

    var generalChartData = require('./user.js');
    var dateFormatter = d3.time.format("%m-%Y");
  var chartSeries = [
      {
        field: 'age',
        name: 'Age',
        color: '#ff7f0e',

      },{
        field: 'index',
        name: 'index',
        color: '#A46CAD',

      }
    ],
    x = function(d) {
      return d.birthday;
    }
   return (

      <div className="wrapper">
        <LineTooltip
      width= {900}
      height= {500}
      data= {generalChartData}
      chartSeries= {chartSeries}
      x= {x}

    />
      </div>
    );
  }
}

date coming as: "birthday": "2011-01-17T00:00:00.000Z",

score 0 · Answer 1 · answered Nov 07 '17 at 15:39

You should rewrite your x function this way:

x = function(d) {
  return new Date(d.birthday);
}

Because of you have a date on x axis.

You also have to define xScale="time", xTicks and xTickFormat props for correct ticks displaying on x axis. Look at this working example for details.

<LineTooltip
  width={600}
  height={500}
  data={data}
  chartSeries={chartSeries}
  x={x}
  xScale="time"
  xTicks={[data.length, '']}
  xTickFormat={function(d) { return dateFormatter(new Date(d)) }}
/>

Show Date/time in x axis using react d3

1 Answers1