3

Is there a way to add x and y axis labels to a line chart from the ReactNative Chart kit? For example, in this graph generated with python you can see that the x and y axes are labeled "Year" and "Employees": enter image description here

However, when I look at the github for the line chart in chart-kit, there seems to be no obvious way to add similar labels to my work with react-native and typescript. There is a yAxisLabel and xAxisLabel property for the line chart, but it just seems to add whatever label I choose to each individual segment for the chart, causing the label to repeat over and over again. This isn't what I want.

Is there no way to create the labels I am looking for with the chart-kit's built in properties? Please let me know! Thanks!

Link to the line chart chart-kit github: https://github.com/indiespirit/react-native-chart-kit#line-chart

Code I am using:

const chartConfig = {
  backgroundGradientFrom: '#fff',
  backgroundGradientTo: '#fff',
  color: (opacity = 1) => `rgba(105, 105, 105, ${opacity})`,
  strokeWidth: 2 // optional, default 3
}

const data1 = {
  labels: sDurations,
  datasets: [{
    data: cDurations,
    color: (opacity = 1) => `rgba(105, 105, 105, ${opacity})`, // optional
    strokeWidth: 2 // optional
  }]
}

return(

  <LineChart
    data={data1}
    width={window.width-100}
    height={220}
    chartConfig={chartConfig}
    yAxisInterval={1}
    segments={3}
    
  />
)
Amy L
  • 71
  • 1
  • 3

0 Answers0