Duplicate X-Axis labels.

Hi @JesperLekland ,

First of all, thanks for a great library. It is very powerful and easy to use.

What is the problem?

I am trying to wrap my head around the way I can format / customize the X-Axis. The dataset I am displaying is a list of {x:date, y:number}. For some reason, I keep getting duplicate labels on the X-axis and I’d like to know what I am doing wrong:

For formatting, I am using a custom label function that returns the day of the week as well as the date

// Returns a formatted string such as "Mon 14th"
const formatLabel = date => dateFns.format(date, 'ddd Do');

Also I have added a function that calculates the number of unique x labels based on the dataset.

// Calculate the number of distinct labels on the X-Axis to set the number of ticks as expected

const distinctLabels = _.uniq(data.map(d => formatLabel(d.x)));

With my sample dataset data, the function distinctLabels returns

Mon 19th, Tue 20th, Wed 21st, Thu 22nd

Here is what I tried

• Using scale = scale.scaleTime

<XAxis
        data={data}
        svg={{
          fill: 'black',
          fontSize: 10,
          fontWeight: 'bold',
          rotation: 15,
          originY: 0,
          y: 3,
        }}
        xAccessor={({ item }) => item.x}
        scale={scale.scaleTime}
        numberOfTicks={distinctLabels.length}
        style={{ marginHorizontal: -15, height: 20 }}
        contentInset={contentInset}
        formatLabel={formatLabel}
      />

which results in the following graph having duplicate entries

Even though numberOfTicks is 4, 5 entries are generated on the X Axis. Mon 19th is not shown and Tue 20th is shown twice, as well as Wen 21st

• Using scale = scale.scaleLinear

I have 4 ticks as expected. However the labels are not what I am expecting. As you can see, Tue 20th is shown twice and Thu 22nd is not visible

I am really not sure how to prevent duplicate entries on the X Axis. Ideally, I would like the values to be the distinct values of my dataset or at least a subset thereof without ANY duplicates.

Any pointers as to what I could try would be greatly appreciated,

Thanks, Michael

[msevestre]

@JesperLekland Yeah ok. I can appreciate the logic behind that. Thanks for your quick response. Cheers,

[msevestre]

@henricazottes I have not found a great solution yet. At the moment I am showing the time as well (something like Tue 28th, 6am , Tue 28th 6pm etc… but I am not very happy with the solution. I am going to try what was suggested in issue #97. I know you said it does not work (and I was really hoping it would 😃)) but I am going to give it a try anyways and report back.