Display only Start and End object names in victory charts in X-Axis

Question

My requirement is to display all the details of my object in Y- Axis and to show first and last object details in X-Axis (like to show a range). My code as bellow

render() {


    let array = [ ];
    this.props.data.map(data => {
        array.push({ x: data.date, y: data.total })
      })

    return (
        <View>
            <VictoryChart>
                <VictoryLine
                    style={{
                        data: { stroke: "#c43a31" },
                        parent: { border: "1px solid #ccc" }
                    }}
                    data={array}
                />
            </VictoryChart>
        </View>
    );
  }

The current display of the graph as per the above code as bellow

I only wants to show the fist and last dates on my X-Axis. What am I missing here ??

Answer 1

I know this is an old question but better late than never. I didn't test this. I'm just guiding you.

You can make use of tickValues for VictoryAxis. doc here

Try to give your array of values as tickValues for the axis like this.

['11-08', '', '', '', '', '11-15]