Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Numberofticks, scaleTime and XAxis configuration. Help needed

See original GitHub issue

What is the problem?

I’m using timestamped values and I’d like to have my XAxis display the month and the day. However, when severals points are from the same day, I get a duplicated date label on the XAxis (as I do not display the hours).

Second problem, when I set numberOfTicks to a given value the number of labels displayed doesn’t correspond. For example, see the results when I console.log(x.ticks(value).length) value = 1: log 1 value = 2: log 1 value = 3: log 4 value = 4: log 4 value = 5: log 4 value = 6: log 4 value = 7: log 8 value = 8: log 8 value = 9: log 8 value = 10: log 8

I guess it comes from the scaleTime which I though was caring about this king of issue but I can’t figure out how it works. If you see what I’m missing to get it working, feel free to share your tips 😃

What platform?

[ 8.1] Android

React Native version: ^0.50.3

Code to reproduce

        <View style={styles.chartWrapper}>
          <View style={{width: 50, flexDirection: 'column'}}>
            <YAxis
              data={data}
              yAccessor={({ item }) => item.value }
              style={{flex: 1}}
              svg={{
                  fill: 'grey',
                  fontSize: 10,
              }}
              min={0}
              contentInset={{ top: 30, bottom: 10 }}
              formatLabel={ value => `${value}${(SENSOR_UNITS[mode])}` }
            />
            <View style={{flex: 0.1}}/>  
          </View>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <AreaChart
                style={{flex: 1}}
                data={data}
                yAccessor={({ item }) => item.value }
                xAccessor={({ item }) => new Date(item.receivedAt) }
                contentInset={{ top: 30, bottom: 10, right: 15, left: 5 }}
                svg={{
                    fill: 'url(#gradient)'
                }}
                showGrid={true}
                gridMin={0}
                extras={[Gradient, Line(COLORS[mode][0])]}
                xScale={d3Scale.scaleTime}
            />
            <XAxis
                style={{ flex: 0.1 }}
                data={data}
                formatLabel={ (value) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                contentInset={{ left: 5, right: 15 }}
                xAccessor={({ item }) => new Date(item.receivedAt)}
                svg={{
                  fontSize: 10,
                }}
                min={0}
                numberOfTicks={6}
                scale={d3Scale.scaleTime}
            />
          </View>
        </View>