Question: Support for scaleTime? about recharts HOT 7 CLOSED

It might be useful for other people that want to use recharts for timeseries that I specify my other work-around.

By default XAxis is of type category so I cannot specify it's domain and it isn't linear; if I have points every minutes with a 5 minutes hole in in the middle, the graph will display a hole of a duration of 1minute :-( .

I try using a number axis and specify the domain but it doesn't work because of the way recharts is done.

So I end up using a category x axis but I manually ensure that they are a point every minutes of my whole domain, with some point having an undefined value.

from recharts.

@slestang
Maybe your case can be implemented by set customized ticks and tickFormatter in XAxis.

http://jsfiddle.net/ntmm30gk/

from recharts.

Thanks! @slestang
Can you show me your code, and how you want to use recharts?

from recharts.

My slightly simplified Chart component:

const Chart = ({ values }) =>
  <div style={{ height: '10rem' }}>
    <ResponsiveContainer >
      <LineChart
          data={values}
          margin={{ top: 5, right: 0, bottom: 0, left: 0 }}
      >
        <Line type="linear" dataKey="value" stroke="#8884d8" dot={false} />
        <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
        <XAxis dataKey="time" tickFormatter={tickFormatDate}/>
        <YAxis dataKey="value" tickFormatter={twoDigitsWithMetricPrefix}/>
        <Tooltip
            formatter={twoDigitsWithMetricPrefix}
            labelFormatter={tickFormatDate}
            wrapperStyle={{ width: 100, backgroundColor: '#ccc' }}
        />
      </LineChart>
    </ResponsiveContainer>
  </div>

Where values is an array of {time: Date, value: Number} and tickFormatDate is a function very close to d3.time.format.multi(formats).

The component is working but the ticks aren't at round time:

A similar chart using NVD3 with ticks each 5 minutes:

I also like to be able to choose the number of ticks for each axis, or precise that I want more of them.

Thanks for your work!

from recharts.

Thanks! I 'll think about supporting scaleTime.

from recharts.

Thanks @xile611
It works with a minor modification, my time property need to be a timestamp instead of Date.

from recharts.

It might be useful for other people that want to use recharts for timeseries that I specify my other work-around.

By default XAxis is of type category so I cannot specify it's domain and it isn't linear; if I have points every minutes with a 5 minutes hole in in the middle, the graph will display a hole of a duration of 1minute :-( .

I try using a number axis and specify the domain but it doesn't work because of the way recharts is done.

So I end up using a category x axis but I manually ensure that they are a point every minutes of my whole domain, with some point having an undefined value.

I know this is old... But how did you ensure points every 5 min? I tried setting ticks for my domain manually, but it doesn't work :(

from recharts.