reactjsreact-nativechartsreact-native-svgreact-native-chart-kit

Hide some dots in Line Chart - react-native-chart-kit

I'm working on Line Chart with react-native-chart-kit. What I'm trying to achieve is, to show dot on a specific data point only and hide dots for all other points. Is it possible? How can I accomplish this?

This is what I need to display:

Line chart with a dot on a single data point

Solution

  • I was able to figure this out. I achieved this using the hidePointsAtIndex prop. It accepts an array of indices of data points that you don't want to display.

    Example usage:

    <LineChart
  data={data}
  width={screenWidth}
  height={256}
  verticalLabelRotation={30}
  chartConfig={chartConfig}
  withHorizontalLines={false}
  withVerticalLines={false}
  bezier
  hidePointsAtIndex={chartData.map((item, idx) => ((idx !== showDotIndex) && idx) )}
  />