First, Recharts is awesome, and all the devs and other contributors have my thanks!
This is a request for feature(s) that improve support for numeric series data (e.g., time-series).
I'm charting time-series data with date-time on the X-axis. The data is typically at 1-hour intervals but the exact timing can vary significantly and there may be holes in the series. However, I want the X-axis ticks to be on-the-hour every hour. My data timestamps are in epoch-time (aka unix time).
Suggestion 1: [X|Y]Axis should support initialTickValue={n} tickModulus={m}
For hourly ticks, I can use tickModulus=3600000 and easily calculate the initial tick as dataMin - (dataMin % tickModulus) or similar.
My current work-around (for ticks on the half-hour) is to add a floating-point "ftime" value to each data element, calculated as timestamp / 1800000 and then <XAxis dataKey="ftime" domain={['dataMin','dataMax']} tickCount={chartData.length + 2 + N} interval={1} allowDecimals={false} allowDataOverflow={true} tickFormatter={(ftime) => fdateTimeHM(ftime)} type='number' /> ...(I'm still figuring out N for the tickCount for the best result.) I also add "fake" data elements (with no Y-value properties) to the beginning and end of the data set, with their respective timestamps at the half-hour (HH:00 or HH:30) before and after the real data elements - that gets me ticks at the correct intervals using domain={['dataMin','dataMax']} and keeps the code a bit simpler. This works okay, but it would be better if I didn't have to duplicate the timestamps.
Suggestion 2: support for Major/Minor ticks by tickModulus and tickFormatter should support arrays ...
Such that tickModulus={[3600000, 86400000]} tickFormatter={[{(t) => tMinor(t)}, {(t) => tMajor(t)}]} would allow me to show hourly HH:mm ticks AND daily MM/DD HH:mm ticks.
Suggestion 2b: support for HTML return values from tickFormatter
Then I could do something like bolding the Major ticks. (I haven't investigated fully but it looks like a suggestion in #63 might help with this.)
Suggestion 3: [X|Y]Axis should support dataKey: String | Number | Function
Then instead of duplicating the timestamps and using <XAxis dataKey="ftime" ... I could do something like <XAxis dataKey={("timestamp", t) => (t / 3600000)} ... (I know that's not quite right but you get the idea.)
Maybe I'm slow but it took me a while to figure out how to work with the Axis interval property. Initially I thought interval was the step-size for X-axis values (i.e., 3600000 should give me ticks at 1-hour intervals). I now realize that interval is the step-size within the array of ticks as controlled by domain, tickCount and values for the dataKey properties (or the array specified by the ticks property). I did try specifying the ticks explicitly using the ticks property, but I could not get it to work correctly with my timestamp values. (Maybe I am slow.)
I have not yet tried working with the scale property - maybe I will find some answers there.
For anyone coming across this with similar questions or needs, I found #148 and #63 particularly helpful.
First, Recharts is awesome, and all the devs and other contributors have my thanks!
This is a request for feature(s) that improve support for numeric series data (e.g., time-series).
I'm charting time-series data with date-time on the X-axis. The data is typically at 1-hour intervals but the exact timing can vary significantly and there may be holes in the series. However, I want the X-axis ticks to be on-the-hour every hour. My data timestamps are in epoch-time (aka unix time).
Suggestion 1: [X|Y]Axis should support
initialTickValue={n} tickModulus={m}For hourly ticks, I can use
tickModulus=3600000and easily calculate the initial tick asdataMin - (dataMin % tickModulus)or similar.My current work-around (for ticks on the half-hour) is to add a floating-point "ftime" value to each data element, calculated as
timestamp / 1800000and then<XAxis dataKey="ftime" domain={['dataMin','dataMax']} tickCount={chartData.length + 2 + N} interval={1} allowDecimals={false} allowDataOverflow={true} tickFormatter={(ftime) => fdateTimeHM(ftime)} type='number' />...(I'm still figuring out N for the tickCount for the best result.) I also add "fake" data elements (with no Y-value properties) to the beginning and end of the data set, with their respective timestamps at the half-hour (HH:00 or HH:30) before and after the real data elements - that gets me ticks at the correct intervals usingdomain={['dataMin','dataMax']}and keeps the code a bit simpler. This works okay, but it would be better if I didn't have to duplicate the timestamps.Suggestion 2: support for Major/Minor ticks by tickModulus and tickFormatter should support arrays ...
Such that
tickModulus={[3600000, 86400000]} tickFormatter={[{(t) => tMinor(t)}, {(t) => tMajor(t)}]}would allow me to show hourly HH:mm ticks AND daily MM/DD HH:mm ticks.Suggestion 2b: support for HTML return values from tickFormatter
Then I could do something like bolding the Major ticks. (I haven't investigated fully but it looks like a suggestion in #63 might help with this.)
Suggestion 3: [X|Y]Axis should support
dataKey: String | Number | FunctionThen instead of duplicating the timestamps and using
<XAxis dataKey="ftime" ...I could do something like<XAxis dataKey={("timestamp", t) => (t / 3600000)} ...(I know that's not quite right but you get the idea.)Maybe I'm slow but it took me a while to figure out how to work with the Axis interval property. Initially I thought interval was the step-size for X-axis values (i.e., 3600000 should give me ticks at 1-hour intervals). I now realize that interval is the step-size within the array of ticks as controlled by domain, tickCount and values for the dataKey properties (or the array specified by the ticks property). I did try specifying the ticks explicitly using the ticks property, but I could not get it to work correctly with my timestamp values. (Maybe I am slow.)
I have not yet tried working with the scale property - maybe I will find some answers there.
For anyone coming across this with similar questions or needs, I found #148 and #63 particularly helpful.