Skip to content

[feature] initialTickValue and tickModulus axis properties #1052

Description

@Kenigmatic

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature requestIssues that are feature requests

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions