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
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>