ReactNative Chart Integration

React Native Chart

React Native provides several libraries that make it easy to integrate chart functionality into your mobile applications. One popular library for this purpose is react-native-chart-kit. It supports various chart types, including line charts, bar charts, pie charts, and more.

Get Sanjana Human In Tech’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Below is a simple example of how to use react-native-chart-kit to create a line chart.

Step 1: Install the library

npm install react-native-chart-kit

Step 2: Import the library and create a LineChart

import React from 'react';
import { View, Text } from 'react-native';
import { LineChart } from 'react-native-chart-kit';

const ChartExample = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
      {
        data: [20, 45, 28, 80, 99, 43],
      },
    ],
  };

  return (
    <View>
      <Text>Line Chart Example</Text>
      <LineChart
        data={data}
        width={300} // from react-native
        height={200}
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1}
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          decimalPlaces: 2,
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16,
          },
          propsForDots: {
            r: '6',
            strokeWidth: '2',
            stroke: '#ffa726',
          },
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16,
        }}
      />
    </View>
  );
};

export default ChartExample;

This example shows a simple line chart with hardcoded data. You can customize the chart appearance using the chartConfig prop. Refer to the react-native-chart-kit documentation for more customization options and information on other types of charts.

Thank you for reading this article! Don’t forget to clap only if you think I deserve it👏 and buy me a coffee.

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and Gmail.

Happy Learning🚀 Happy Coding💻.