Missing X ticks for time series plot with gaps between data

[jabberwo]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

See codesandbox example. Even trying the nebulous attributes tickInterval and tickCount you can't get x axis tick marks to show up during the time of missing data. Huge gaps on the axis and it looks wrong and users would still like to interpolate data between collected data points, and need a timestamp (ie x axis tick).

What is expected?

Equally spaced tick marks between the first and last.

What is actually happening?

No tick marks when there are no data points

Environment	Info
Recharts	v1.8.5
React	16.8.6
System	Ubuntu 18.04
Browser	chrome

---

IF and ONLY IF you set domain={['dataMin', 'dataMax']}, which you have to with a timeseries. If plot a non-time series you get the same issue but playing with tickInterval and tickCount you can get something OK, but that's not useful in a reusable component.

const data = [
  { x: 5, y: 10 },
  { x: 8, y: 8 },
  { x: 10, y: 5 },
  { x: 12, y: 7 },
  { x: 15, y: 15 },
  { x: 40, y: 10 }
];
const SampleChart = props => {
  return (
    <LineChart width={500} height={400} data={data}>
      <XAxis
        dataKey="x"
        type="number"
        // tickInterval={0} tickCount={10}
        domain={["dataMin", "dataMax"]}
      />
      <YAxis />
      <Line dataKey="y" type="monotoneX" stroke="red" />
    </LineChart>
  );
};

Tried it with latest v2 beta and same issue.

[fstephany]

Similar problem for me with:

<XAxis
    dataKey="timestamp"
    type="number"
    tickCount={6}
    minTickGap={0}
    domain={['dataMin', 'dataMax']}
    tickFormatter={(ts) => (new Date(ts)).getUTCMinutes()}
    interval={0}
/>

which does not render the 5th tick. Upadting to the latest 2.0.0 beta does not solve the issue.

I'll try to come up with a more minimalistic example.

[ferrao]

I am experiencing the same in 2.0.6

[shibjo]

Hi All, Did anyone found any workaround for this problem? I am also facing the same issue. The ticks render correctly if the domain is set to ['auto','auto'], otherwise not.

[ashin-krj]

I have found a similar problem with the y-axis instead:

This occurs only when a domain prop is added with min and max values. Also tried increasing the default tick count, but always rendered with one less tick.

[vtarelkin]

@ashin-krj @shibjo @ferrao @fstephany

the workaround here is to explicitly set ticks property like ticks={[195, 255,315,375,425]} but I want to calculate it automatically, not manually

[vtarelkin]

@xile611 hello, we need you help!

[ivi-hamiti]

experiencing the same

[nikolasrieble]

You can use your data to generate a scale, and pass that scale. Then ticks are independent of the data points, but only depend on the max and min.

You might do something along the lines of

import { scaleLinear } from 'd3-scale';
import { extent } from 'd3-array';

export function generateXAxisOptionsForNumericScale(
  values: number[]
) {
  const [linearDomainMin, linearDomainMax] = extent(values);
  const linearScale = scaleLinear().domain([linearDomainMin, linearDomainMax]);

  return {
    domain: linearScale.domain(),
    tickFormatter: linearScale.tickFormat(),
    scale: linearScale,
    type: 'number' as const,
    ticks: linearScale.ticks(NUMERIC_TICK_COUNT),
  } 

[Joelk97]

Still don't figured out how to show all the ticks I set in ticks. Only showing the ones, that have a corresponding x value in the dataset.