When our power in our apps is data, it’s important that we present it to our users in a beautiful way. This is where chart libraries come in. They allow you to present data to users in an engaging way so they use your application more.

In this tutorial, we’ll take a look at the React Native Chart Kit, a Chart library for React Native. We’ll build an application that uses it so you can have a practical example to work with.

  • Build the financial tracking application
  • Use the React Native Chart Kit to create charts
    • The pie chart
    • A histogram
    • Line diagram

Application overview. Build a financial tracking application

The application we will discuss is a financial tracking application.

The application has four screens. Three of them are for user input, and the last one is for diagrams. We’ll focus primarily on the screens with charts, but we’ll also briefly browse the other screens.

These are the three input screens.

  • Create categories – The overall classification of each transaction is a category. One category could be income or expenditure. For example, users can create an “Internet bill” as an expense category, or a “major job salary” as an income category.

  • Create Funds – allows users to enter their different fund stores. Examples include: physical wallets, electronic wallets, savings bank accounts, stocks and cryptocurrencies

  • Create Transactions – This is where users enter all their transactions so they can keep track of their finances. For example, when they receive a paycheck at the end of the month, they can create a deal for it.

The final screen is the report screen, where charts are presented to the user.

Setting up the project

The easiest way to set up a project is to start a new React Native project.

npx react-native init RNChartKitFinanceApp

Copy the code

Once done, copy the files from the GitHub repo. The React Native version I use for this application is 0.65.1. If more new versions are available by the time you read this, be sure to use that version. You can do this by replacing the corresponding version in your package.json file.

The application uses the following software package. If you want to follow along and build a financial tracking app, play with the React Native Chart Kit and be sure to follow the installation steps on their website.

  • React Navigation- Used to navigate between different pages
  • React Native Paper- Style design for applications
  • React Native DateTimePicker
  • react-native-vector-icons
  • React-native -sqlite-storage- Used to store data
  • React -native- SVG – The application does not rely on this directly. It is a peer dependency of the React Native Chart Kit.

Only packages with native dependencies have been mentioned above. See the package.json file in the repo for a complete list of dependencies.

Building the application

This won’t be your typical tutorial built from scratch, so we can focus on the main topics. React Native Chart Kit.

We no longer look at the screens that create categories, funds and trades. We won’t talk about React Navigation and React Native Paper Settings anymore. You can simply check this version.

Instead, we’ll just focus on the reporting screen and the way the query gets the data.

SQLite database

Let’s first look at how we use the database. As mentioned earlier, we used the React Native SQLite repository to manage our own SQLite database locally.

We only need the library’s three methods: enablePromise() and openDatabase().

// data/db-service.js
import {
  enablePromise,
  openDatabase,
} from 'react-native-sqlite-storage';

Copy the code

EnablePromise () is designed to handle promises when different methods are executed.

enablePromise(true);

Copy the code

OpenDatabase () is used to create and openDatabase files on the local storage that the operating system allocates to the application. If the file already exists, it simply opens it.

export const getDBConnection = async () => {
  return openDatabase({name: 'finance-data.db', location: 'default'});
};

Copy the code

Creating a table simply knows the query to execute, and then calls the executeSql() method on the DB object, providing your query as a parameter. Below is the code to create the Transactions table.

We use an integer data type to store transactionDate because it will be stored as a Unix timestamp.

Category_id is the rowId from the Categories table. We could also add a foreign key to it, but for simplicity we won’t do that.

export const createTransactionsTable = async db => {
  const query = `CREATE TABLE IF NOT EXISTS transactions (transactionDate INTEGER, summary TEXT, category_id INTEGER NOT NULL, transactionType TEXT, amount FLOAT)`;
  await db.executeSql(query);
};

Copy the code

Below is the code to create a new transaction record. Except for transactionDate, all transaction fields can be saved directly.

The Date picker library returns a Date object, so we have to get the timestamp by calling getTime() and then dividing by 1000 to get the Unix timestamp. This is important because we cannot call the date manipulation methods in SQLite if they are not saved in the correct format.

export const createTransaction = async (db, transaction) => {
  const {transactionDate, summary, category, transactionType, amount} =
          transaction;
  const timestamp = parseInt((transactionDate.getTime() / 1000).toFixed(0));
  const insertQuery = `INSERT INTO transactions(transactionDate, summary, category_id, transactionType, amount) VALUES("${timestamp}", "${summary}", "${category}", "${transactionType}", "${amount}")`;
  return db.executeSql(insertQuery);
};

Copy the code

Be sure to look at the code in the REPO that handles categories and funds, because we won’t cover that in this tutorial.

Create financial charts using the React Native Chart Kit

Now it’s time to move on to the main topic of this tutorial: creating charts with the React Native Chart Kit.

First, import the modules we need.

// src/screens/ReportsScreen.js
import React, {useState, useEffect, useCallback} from 'react';
import {ScrollView, StyleSheet} from 'react-native';

import {withTheme} from 'react-native-paper';
import {SafeAreaView} from 'react-native-safe-area-context';

Copy the code

Import custom components for each type of chart as well. We will create these components later.

import FinancePieChart from '.. /components/FinancePieChart'; import FinanceLineChart from '.. /components/FinanceLineChart'; import FinanceBarChart from '.. /components/FinanceBarChart';Copy the code

Next, extract the methods used to get the report data we need from the database. Each of these methods (except for the first two) corresponds to the type of report we will display to the user.

If you looked at the previous screenshot, each of these methods corresponds to each diagram (except the last diagram depends on the last three methods below). We will also add these later.

import { getDBConnection, createTransactionsTable, // pie charts getTransactionsGroupedByTransactionType, getExpenseTransactionsGroupedByCategory, getIncomeTransactionsGroupedByCategory, getSavingsTransactionsGroupedByCategory, getInvestmentTransactionsGroupedByCategory, // bar charts getExpenseGroupedByMonth, // for bar chart and line chart getSavingsGroupedByMonth, getIncomeGroupedByMonth, getInvestmentsGroupedByMonth, // for line chart } from '.. /.. /data/db-service';Copy the code

Next, create the component and initialize the state values that we will use to store data from the database.

const ReportsScreen = ({theme}) => {
  const {colors, fonts} = theme;

  const [byExpenseCategories, setByExpenseCategories] = useState([]);
  const [byIncomeCategories, setByIncomeCategories] = useState([]);
  const [bySavingsCategories, setBySavingsCategories] = useState([]);
  const [byInvestmentCategories, setByInvestmentCategories] = useState([]);
  const [byTransactionTypes, setByTransactionTypes] = useState([]);

  const [monthlyIncome, setMonthlyIncome] = useState([]);
  const [monthlyExpense, setMonthlyExpense] = useState([]);

  const [monthlySavings, setMonthlySavings] = useState([]);
  const [monthlyInvestments, setMonthlyInvestments] = useState([]);
}

Copy the code

Next, we now call these methods and update the status with the values they return.

const loadDataCallback = useCallback(async () => { try { const db = await getDBConnection(); await createTransactionsTable(db); const groupedByTransactionTypes = await getTransactionsGroupedByTransactionType(db); if (groupedByTransactionTypes.length) { setByTransactionTypes(groupedByTransactionTypes); } const groupedByExpenseCategories = await getExpenseTransactionsGroupedByCategory(db); if (groupedByExpenseCategories.length) { setByExpenseCategories(groupedByExpenseCategories); } const groupedByIncomeCategories = await getIncomeTransactionsGroupedByCategory(db); if (groupedByIncomeCategories.length) { setByIncomeCategories(groupedByIncomeCategories); } const groupedBySavingsCategories = await getSavingsTransactionsGroupedByCategory(db); if (groupedBySavingsCategories.length) { setBySavingsCategories(groupedBySavingsCategories); } const groupedByInvestmentCategories = await getInvestmentTransactionsGroupedByCategory(db); if (groupedByInvestmentCategories.length) { setByInvestmentCategories(groupedByInvestmentCategories); } const incomeMonth = await getIncomeGroupedByMonth(db); if (incomeMonth) { setMonthlyIncome(incomeMonth); } const expenseMonth = await getExpenseGroupedByMonth(db); if (expenseMonth) { setMonthlyExpense(expenseMonth); } const savingsMonth = await getSavingsGroupedByMonth(db); if (savingsMonth) { setMonthlySavings(savingsMonth); } const investmentMonth = await getInvestmentsGroupedByMonth(db); if (investmentMonth) { setMonthlyInvestments(investmentMonth); } } catch (error) { console.error('transaction list err: ', error); }} []); useEffect(() => { loadDataCallback(); }, [loadDataCallback]);Copy the code

To get a consistent idea of what each method does, here’s a quick breakdown.

  • getTransactionsGroupedByTransactionType()– Group transactions for the current month by transaction type (e.g., expense, income, savings, investment) and get a sum for each transaction.
  • getExpenseTransactionsGroupedByCategory()– Group transactions for the month by all categories under expenditure (e.g. water, electricity, dining out) and return the sum of each item.
  • getIncomeTransactionsGroupedByCategory()– Similar to the previous one, but groups the categories under income (e.g., main income, sideline income).
  • getSavingsTransactionsGroupedByCategory()– Similar to the previous one, but the transaction type is limited to savings (e.g. Bank A Savings, Bank B savings).
  • getInvestmentTransactionsGroupedByCategory()– Similar to the previous, but the type of transaction is limited to investments (e.g., stocks, cryptocurrencies, real estate).
  • getIncomeGroupedByMonth()– Returns the total monthly income
  • getExpenseGroupedByMonth()– Returns the total monthly expenditure
  • getSavingsGroupedByMonth()– Returns the total amount saved each month
  • getInvestmentsGroupedByMonth()– Returns the total amount invested each month

Back in the code, we now add the conditions to display each chart.

const hasByTransactionTypes = byTransactionTypes.length > 0;
const hasByExpenseCategories = byExpenseCategories.length > 0;
const hasByIncomeCategories = byIncomeCategories.length > 0;
const hasBySavingsCategories = bySavingsCategories.length > 0;
const hasByInvestmentCategories = byInvestmentCategories.length > 0;
const hasMonthlyIncome = monthlyIncome.length > 0;
const hasMonthlyExpense = monthlyExpense.length > 0;

const hasIncomeSavingsInvestment =
        monthlyIncome.length > 0 ||
        monthlySavings.length > 0 ||
        monthlyInvestments.length > 0;

Copy the code

Next, we need to declare the Settings for the last chart (the one that shows the line graph of income, savings, and investment in one chart).

We can’t actually build the data in the component itself; That’s why we’re building it here. These are primarily used by the React Native Chart Kit library.

const lineChartLegends = [
  {
    name: 'Income',
    color: '#003049',
  },
  {
    name: 'Savings',
    color: '#d62828',
  },
  {
    name: 'Investment',
    color: '#f77f00',
  },
];

// dataset for the line chart
const datasets = [];
if (monthlyIncome.length > 0) {
  datasets.push({
    data: monthlyIncome.map(item => item.value),
    color: (opacity = 1) => '#003049',
    strokeWidth: 2,
  });
}

if (monthlySavings.length > 0) {
  datasets.push({
    data: monthlySavings.map(item => item.value),
    color: (opacity = 1) => '#d62828',
    strokeWidth: 2,
  });
}

if (monthlyInvestments.length > 0) {
  datasets.push({
    data: monthlyInvestments.map(item => item.value),
    color: (opacity = 1) => '#f77f00',
    strokeWidth: 2,
  });
}

const chartData = {
  labels: monthlyIncome.map(item => item.label),
  datasets,
};

Copy the code

Finally, go back to the UI.

return (
  <SafeAreaView
    style={[styles.container, {backgroundColor: colors.background}]}
  >
    <ScrollView
      style={{
        flex: 1,
      }}
    >
      {hasByTransactionTypes && (
        <FinancePieChart
          title="Transaction Types"
          data={byTransactionTypes}
        />
      )}

      {hasByExpenseCategories && (
        <FinancePieChart title="Expenses" data={byExpenseCategories} />
      )}

      {hasByIncomeCategories && (
        <FinancePieChart title="Income" data={byIncomeCategories} />
      )}

      {hasBySavingsCategories && (
        <FinancePieChart title="Savings" data={bySavingsCategories} />
      )}

      {hasByInvestmentCategories && (
        <FinancePieChart title="Investment" data={byInvestmentCategories} />
      )}

      {hasMonthlyIncome && (
        <FinanceBarChart
          title="Monthly Income"
          data={monthlyIncome}
          fillShadowGradient="#DF5353"
          color="#d62828"
        />
      )}

      {hasMonthlyExpense && (
        <FinanceBarChart
          title="Monthly Expense"
          data={monthlyExpense}
          fillShadowGradient="#00b4d8"
          color="#0077b6"
        />
      )}

      {hasIncomeSavingsInvestment && (
        <FinanceLineChart
          title="Income to savings to investment"
          chartData={chartData}
          fillShadowGradient="#ccc"
          legend={lineChartLegends}
        />
      )}
    </ScrollView>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
});

export default withTheme(ReportsScreen);

Copy the code

The pie chart

Now let’s move on to the diagram component’s code. First, let’s take a look at the FinancePieChart component. This uses the PieChart component in the React Native Chart Kit. We use it to generate pie charts of transaction types, expenditure types, income types, savings types, and investment types.

Let’s start by importing the modules we need. We will also import a Legend component that displays a Legend for each data point.

Please note that the PieChart component already has its own legend, but we will not use it. That’s why we use hasLegend={false} as a prop. That’s because it’s not very customizable. It’s really hard to change its location. Using a custom Legend component gives you more flexibility.

We are using the Dimensions module to get the screen width of the current device. We then feed this width to the component to fit the screen width. Note that it does not actually consume the full available width of the device. Instead, it will use only half of them.

// src/components/FinancePieChart.js

import React from 'react';
import {View, Text, Dimensions, StyleSheet} from 'react-native';

import {PieChart} from 'react-native-chart-kit';

import Legend from './Legend';

const screenWidth = Dimensions.get('window').width;

Copy the code

Next, initialize the diagram configuration. This is the configuration object for the diagram. It is primarily used to configure general chart Settings such as strokeWidth (the base strokeWidth of the chart) and color (a function used to calculate the base colors of labels and sectors in the chart). Note that not all properties are applicable to all chart types.

There will be some that only work for certain types. But the good news is that all of these attributes have default values assigned to them, so you can probably get away with using attributes that don’t apply to the particular chart you’re using.

const chartConfig = { backgroundGradientFrom: '#1E2923', backgroundGradientFromOpacity: 0, backgroundGradientTo: '# 08130 - d, backgroundGradientToOpacity: 0.5, color: (opacity = 1) = > ` rgba (26, 255, 146, ${opacity}) `, strokeWidth: 2, useShadowColorFromDataset: false, };Copy the code

Next, render the PieChart component. This component accepts the following items.

  • data– The data you want to present. We’ll see that later, once we get throughsrc/data/db-service.jsThe query and data returned in the file. But as a general rule of thumb, you need an array of objects with labels and values. Labels are legends and values are data points.
  • width 和height– Size of chart
  • chartConfig– General configuration object of the chart
  • accessor– fromdataObject from which the numeric value is taken.
  • backgroundColor– The background color applied to the chart. If you don’t want to apply any background colors, this can betransparent 或none
  • center– Offsets the x and y coordinates of the position chart.[0, 0]Means we position it at the beginning of the assigned position. Note that this is not a fixed position, but a relative position, so it will always adhere to the element that precedes it.
  • hasLegend– Whether to display legend

You can check out the Repo to learn more about the items you can specify.

Right below the diagram, we render the legend.

function FinancePieChart({title, data}) {
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text>{title}</Text>
      </View>

      <View style={styles.bodyContainer}>
        <View style={styles.chartContainer}>
          <PieChart
            data={data}
            width={screenWidth}
            height={200}
            chartConfig={chartConfig}
            accessor={'total'}
            backgroundColor={'transparent'}
            center={[0, 0]}
            hasLegend={false}
          />
        </View>

        <View style={styles.legendContainer}>
          {data.map(({name, color}) => {
            return <Legend key={name} name={name} color={color} />;
          })}
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
  },
  bodyContainer: {
    flexDirection: 'row',
  },
  chartContainer: {
    flex: 1,
  },
  legendContainer: {
    flex: 1,
    marginTop: 20,
  },
});

export default FinancePieChart;

Copy the code

Before we move on to the next diagram, let’s look at how we get the data provided to the FinancePieChart component.

Here is the code to get the data for the first pie chart. We use the aggregate function SUM() to group the amount in each row by transactionType. The transaction type can be found in the config/app.js file.

To get the data we need, we loop through the result several times: a forEach and a for loop. Note that the outer loop is executed only once, just so that we can get the object that contains the actual result.

Row data does not appear as a normal object, so we must call the item() method on result.rows and supply the current index to get the data we need. From there, we extract the Name and total columns.

We also added an attribute color that specifies the color of the data point. These colors are hard-coded in the SRC /helpers/palette. Thanks to the beautiful color palette provided by Coolors.

export const getTransactionsGroupedByTransactionType = async db => { try { const transactions = []; const results = await db.executeSql( `SELECT SUM(amount) AS total, transactionType AS name FROM transactions WHERE strftime("%m/%Y", datetime(transactionDate, 'unixepoch', 'localtime')) = ? GROUP BY transactionType`, [monthYear], ); results.forEach(result => { for (let index = 0; index < result.rows.length; index++) { const {name, total} = result.rows.item(index); transactions.push({ name, total, color: paletteOne[index], }); }}); return transactions; } catch (error) { console.error(error); throw Error('Failed to getTransactionsGroupedByTransactionType... '); }};Copy the code

Notice that monthYear is declared near the top.

enablePromise(true);

const monthYear = new Date().toLocaleDateString(undefined, {
  year: 'numeric',
  month: '2-digit',
});

Copy the code

The other pie charts use almost the same code. Only the query has changed, so I include only the query here. This time, we use an INNER JOIN to JOIN the Categories table. This is because we need to filter by categoryType.

const results = await db.executeSql(
  `SELECT SUM(amount) AS total, categories.name AS name FROM transactions 
  INNER JOIN categories ON categories.rowId = transactions.category_id 
  WHERE categoryType = 'expense' AND strftime("%m/%Y", datetime(transactionDate, 'unixepoch', 'localtime')) = ?
  GROUP BY transactions.category_id`,
  [monthYear],
);

Copy the code

A histogram

Now let’s look at the FinanceBarChart component. We’ll use it to generate a graph of a user’s monthly income and monthly expenses. The code should be very similar. For chartConfig, we added the following attributes.

    • barPercentage– Defines the percentage of available width for each bar chart in the chart. This is a value between 0 and 1. In this case, we specify0.5, indicating that it will use only half of the available width.
    • fillShadowGradient– Defines the color of each bar chart. Note that the background gradient will be calculated based on this value, so it is not actually a solid color.
    • fillShadowGradientOpacity– Texture opacityfillShadowGradient

  • LabelColor – The color of the text label below each bar chart

  • DecimalPlaces – displays the number of decimalPlaces. The default value is 2, so if you don’t want to display any decimals, you must specify 0.

We gave it basically the same item as the pie chart. The only difference is showBarTops. This is a Boolean value that specifies whether to display a line at the top of each bar chart. We specify false because we don’t really want to show it.

As for the data you provide, it allows you to add multiple objects under the datasets property, but it doesn’t actually render multiple bars. So you can’t really use this type of graph to compare data.

// src/components/FinanceBarChart.js import React from 'react'; import {View, Text, Dimensions, StyleSheet} from 'react-native'; import {BarChart} from 'react-native-chart-kit'; const screenWidth = Dimensions.get('window').width; function FinanceBarChart({title, fillShadowGradient, data}) { const chartConfig = { backgroundGradientFrom: '#fff', backgroundGradientFromOpacity: 0, backgroundGradientTo: '#fff', backgroundGradientToOpacity: 0.5, fillShadowGradient fillShadowGradientOpacity: 1, color: (opacity = 1) = > ` # 023047 ` labelColor: (opacity = 1) = > ` # 333 ` strokeWidth: 2, barPercentage: 0.5, useShadowColorFromDataset: false, decimalPlaces: 0,}; const labels = data.map(item => { return item.label; }); const values = data.map(item => { return item.value; }); const chartData = { labels, datasets: [ { data: values, }, ], }; return ( <View style={styles.container}> <View style={styles.titleContainer}> <Text>{title}</Text> </View> <BarChart data={chartData} width={screenWidth} height={220} chartConfig={chartConfig} showBarTops={false} /> </View> ); } const styles = StyleSheet.create({ container: { marginBottom: 20, }, titleContainer: { flex: 1, alignItems: 'center', }, }); export default FinanceBarChart;Copy the code

Check out the documentation for more information on configurations and items you can use.

Now let’s look at the query that feeds the chart. Similarly, we use SQLite’s Strftime function to group transactions by month to get a total and filter only income transactions.

export const getIncomeGroupedByMonth = async (db) => { try { const transactions = []; const results = await db.executeSql( `SELECT strftime("%m-%Y", datetime(transactionDate, 'unixepoch', 'localtime')) AS monthYear, SUM(amount) AS total FROM transactions WHERE transactionType = 'income' GROUP BY monthYear` ); results.forEach((result) => { for (let index = 0; index < result.rows.length; index++) { const item = result.rows.item(index); transactions.push({ value: item.total, label: item.monthYear, }); }}); return transactions; } catch (error) { console.error(error); throw Error("Failed to getIncomeGroupedByMonth..." ); }};Copy the code

The code for capturing monthly expenses is almost the same. You just need to replace expense with transactionType, so we won’t go over it here.

Line diagram

The final type of chart we will discuss is the line chart. We use it to show a month-to-month comparison of income, savings and investment.

As you can see from the previous code in the report screen, this can accept the DATASets property of multiple objects, so it’s best used for comparison purposes. This uses the LineChart component in the React Native Chart Kit library.

As far as chartConfig is concerned, this one we provide is really no different.

The LineChart component does not come entirely with its own legend. That’s why we’re reintroducing our own Legend component. This will serve as a legend for each of the data points we compare, including income, savings, and investment.

// src/components/FinanceLineChart.js
import React from 'react';
import {View, Text, Dimensions, StyleSheet} from 'react-native';
import {LineChart} from 'react-native-chart-kit';

import Legend from './Legend';

const screenWidth = Dimensions.get('window').width;

function FinanceLineChart({title, chartData, legend, fillShadowGradient}) {
  const chartConfig = {
    backgroundGradientFrom: '#fff',
    backgroundGradientFromOpacity: 0,
    backgroundGradientTo: '#fff',
    backgroundGradientToOpacity: 0.5,

    fillShadowGradient,
    fillShadowGradientOpacity: 0,
    color: (opacity = 1) => `#023047`,
    labelColor: (opacity = 1) => `#333`,
    strokeWidth: 2,

    useShadowColorFromDataset: false,
    decimalPlaces: 0,
  };

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text>{title}</Text>
      </View>
      <LineChart
        data={chartData}
        width={screenWidth}
        height={220}
        chartConfig={chartConfig}
      />

      <View style={styles.legendContainer}>
        {legend.map(({name, color}) => {
          return <Legend key={name} name={name} color={color} />;
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
  },
  legendContainer: {
    flex: 1,
    marginTop: 20,
    alignItems: 'center',
  },
});

export default FinanceLineChart;

Copy the code

Of the Chart components provided by the React Native Chart Kit, LineChart is the most powerful. We didn’t use it here, but if you look at the documentation, you’ll see that it has more items available than the others. For example, it has an onDataPointClick item that allows you to perform an action when clicking on a data point on a chart.

As for the data, we’ll extract it from three separate queries. One of these is already used by FinanceBarChart above. This is monthlyIncome. So what we need now is data on savings and investment. It’s for savings.

export const getSavingsGroupedByMonth = async (db) => { try { const transactions = []; const results = await db.executeSql( `SELECT strftime("%m-%Y", datetime(transactionDate, 'unixepoch', 'localtime')) AS monthYear, SUM(amount) AS total FROM transactions WHERE transactionType = 'savings' GROUP BY monthYear` ); results.forEach((result) => { for (let index = 0; index < result.rows.length; index++) { const item = result.rows.item(index); transactions.push({ value: item.total, label: item.monthYear, }); }}); return transactions; } catch (error) { console.error(error); throw Error("Failed to getSavingsGroupedByMonth..." ); }};Copy the code

I’ll leave the other one with you to look at in the REPO.

conclusion

That’s it! In this tutorial, you will learn how to create different kinds of charts in React Native using the React Native Chart Kit library. Specifically, we have used pie, bar, and line charts throughout this tutorial. You can find the full source code of the app at its GitHub repo.

If you want to learn more about other chart libraries you can use with React Native, check out this article about the React Native chart library.

The postUsing React Native Chart Kit to visualize dataappeared first onLogRocket Blog.