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.

XAxis formatLabel not showing value

See original GitHub issue

Hey.

I’m stuck with the formatLabel prop. I want to show the date under my chart. Now it just shows the array key.

This is the array that gets returned by the this._chartXAxis() function:

["2018-02-20", "2018-02-21", "2018-02-22", "2018-02-23", "2018-02-24", "2018-02-25", "2018-02-26", "2018-02-27"]

Here’s my code:

<View style={styles.chartContainer}>
    <Card>
        <View style={styles.chart}>
            <LineChart
                style={{ flex: 1 }}
                data={this._chartStats('impressions')}
                gridMin={0}
                svg={{ stroke: '#969FAD' }}
                contentInset={{ top: 10, bottom: 10 }}
            />
            <LineChart
                style={ StyleSheet.absoluteFill }
                data={this._chartStats('clicks')}
                gridMin={0}
                svg={{ stroke: '#1E92FF' }}
                contentInset={{ top: 10, bottom: 10 }}
            />
            <LineChart
                style={ StyleSheet.absoluteFill }
                data={this._chartStats('payout')}
                gridMin={0}
                svg={{ stroke: '#FE2851' }}
                contentInset={{ top: 10, bottom: 10 }}
            />
            <LineChart
                style={ StyleSheet.absoluteFill }
                data={this._chartStats('conversions')}
                gridMin={0}
                svg={{ stroke: '#FE2851' }}
                contentInset={{ top: 10, bottom: 10 }}
            />
            <LineChart
                style={ StyleSheet.absoluteFill }
                data={this._chartStats('payout')}
                gridMin={0}
                svg={{ stroke: '#44DB5E' }}
                contentInset={{ top: 10, bottom: 10 }}
            />
            <XAxis
                style={{ marginHorizontal: -10 }}
                data={ this._chartXAxis() }
                formatLabel={(value, index) => value}
                contentInset={{ left: 10, right: 10 }}
                svg={{ fontSize: 10 }}
            />
        </View>
    </Card>
</View>

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

11reactions

holtccommented, Jun 13, 2019

Should now be xAccessor={({ item, index }) => item}

5reactions

JesperLeklandcommented, Feb 27, 2018

Hey guys! You need to add the xAccessor prop. If it’s omitted the XAxis will assume you’re only interested in the index. i.e xAcessor={ ({ value }) => value } in your use cases.

PS. You will probably have a problem with overlapping labels with such long strings. Check out the examples repo if you need inspiration

PPS. I see now that I’ve forgotten to update the README regarding this, I just wrote it in the release changelog 😝 Will keep this issue open as a reminder