Recharts: How do you display the XAxis with a date format

Created on 31 Jul 2017  路  3Comments  路  Source: recharts/recharts

This issue https://github.com/recharts/recharts/issues/612 was never properly resolved and I am running into the same problem. dateFormat is not defined and I'm getting an error when I try and replicate the code. Please address.

Most helpful comment

@patientplatypus I think you misunderstood that issue.

dateFormat in the issue you listed above is a function that you are required to define yourself.

example:
``` dataKey="x"
tickFormatter={formatXAxis}
/>

// Example date formatter

function formatXAxis(tickItem) {
// If using moment.js
return moment(tickItem).format('MMM Do YY')
}
```

All 3 comments

@patientplatypus I think you misunderstood that issue.

dateFormat in the issue you listed above is a function that you are required to define yourself.

example:
``` dataKey="x"
tickFormatter={formatXAxis}
/>

// Example date formatter

function formatXAxis(tickItem) {
// If using moment.js
return moment(tickItem).format('MMM Do YY')
}
```

just follow @JacquiManzi 's demo

<XAxis dataKey="name" tickFormatter={this.formatXAxis}/>

formatXAxis = (tickItem) => { // do something to format tick label }

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexandersoto picture alexandersoto  路  3Comments

jshamley picture jshamley  路  3Comments

jetpack3331 picture jetpack3331  路  3Comments

patrick-lewandowski picture patrick-lewandowski  路  3Comments

manishjohar picture manishjohar  路  3Comments