Question: Support for scaleTime?

[slestang]

I am trying to graph a time-series with recharts and thing will be better/simpler if I could use the D3 timeScale (x axis values are Date).

I look into the code to see where scale where set and I try to replace the scalePoint by scaleTime in getFormatAxisMap(). But it doesn't work (it would be too easy). It throw an error in getTicksOfAxis() because scaleTime obviously doesn't have the bandwidth method. I suppose that is far to be the only issue of changing the scale.

Do you have any idea if making the scale customizable or having an option to specify that we want a time scale on one of the axis will be difficult to implement?

[xile611]

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

[slestang]

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!

[xile611]

Thanks! I 'll think about supporting scaleTime.

[xile611]

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

http://jsfiddle.net/ntmm30gk/

[slestang]

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

[slestang]

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.

[olelivalife]

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 :(