Custom ticks of XAxis fixed

Do you want to request a feature or report a bug?

It’s more of an implementation problem

What is the current behavior?

I tried <XAxis type="number" ticks={['09:00', '10:00', '11:00']} /> but both graph and the xaxis disappear

What is the expected behavior?

I want the XAxis to display fixed ticks like different hour in a day, and each coming new data will represent a seconds of it (much like of an stock chart)

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

I am using "recharts": "^1.0.0-alpha.6"

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:13 (1 by maintainers)

Top GitHub Comments

28reactions

anze555commented, Dec 10, 2017

@TuanDSE62171 I read some other tickets and found a way to do this. The idea is to treat time as number (as you have specified in XAxis’s type) and to explicitly supply domain, ticks and tickFormatter. Working example:

import moment from 'moment';  // `yarn add moment`
const data = [
  {t: 1080001800, uv: 4000, pv: 2430, amt: [2400,2500]},
  {t: 1080005400, uv: 3000, pv: 1398, amt: [1210,1600]},
  {t: 1080009000, uv: 2000, pv: 2340, amt: [2290,2550]},
  {t: 1080012600, uv: 2780, pv: 2108, amt: [2000,2200]},
  {t: 1080016200, uv: 1890, pv: 2200, amt: [2181,2300]},
  {t: 1080019800, uv: 2390, pv: 2600, amt: [2500,2700]},
  {t: 1080023400, uv: 3490, pv: 2120, amt: [2100,2150]},
];

Then define XAxis like this:

<XAxis 
  dataKey="t" 
  type="number" 
  domain={[1080000000, 1080025200]}
  tickFormatter={(tick) => moment(tick * 1000).format('HH:mm')}
  ticks={[1080000000, 1080003600, 1080007200, 1080010800, 1080014400, 1080018000, 1080021600, 1080025200]}
/>

Using interval didn’t work for me - I got an empty axis whatever I did. Also, adding scale="time" led to empty axis.

Result: screenshot-2017-12-10 react app 1