reactjsreact-nativevictory-chartsvictory-native

Is there a way to plot a dot on just the last data point on a victory line chart for react native


So currently I have this as my code for the victory line chat

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine, VictoryChart } from 'victory-native'

let data = [
    {
        x: 1,
        y: 0
    },
    {
        x: 2,
        y: 0
    },
    {
        x: 3,
        y: 0
    },
    {
        x: 4,
        y: 70
    },
    {
        x: 5,
        y: 73
    },
    {
        x: 5,
        y: 73
    },
    {
        x: 5,
        y: 73
    },
    {
        x: 5,
        y: 73
    }
]

export default function Graph() {
    return (
        
    <VictoryLine style={styles.graph} height={150} width={350} data={data} style={{data: {stroke: 'orange', strokeWidth: 2.5}}} />
  
    )
}

const styles = StyleSheet.create({
    graph: {
        marginRight: 0
    }
})

which gives me a line chart that looks like this. Is there a way to:

A) Plot dotted point on the line for each data point

B) Just dot the last data point in the data list. Example image here of what I want to achieve


Solution

  • You can wrap your VictoryLine with an VictroyChart and hide the axis, like this sample

      <View>
        <VictoryChart polar={this.state.polar} height={390}>
          <VictoryAxis style={{ 
            axis: {stroke: "transparent"}, 
            ticks: {stroke: "transparent"},
            tickLabels: { fill:"transparent"} 
          }} />
          <VictoryLine
            interpolation={this.state.interpolation} data={data}
            style={{ data: { stroke: "#c43a31" } }}
          />
          <VictoryScatter data={[data[data.length-1]]}
            size={5}
            style={{ data: { fill: "#c43a31" } }}
          />
        </VictoryChart>
      </View>