Create a Chart in React

Froala Charts is a JavaScript charting library that enables you to create interactive charts, gauges, maps and dashboards in JavaScript. We have built a simple and lightweight React component that provides bindings for Froala Charts. The react-froalacharts component allows you to easily add rich and interactive charts to any React project.

On this page, you'll see how to install Froala Charts and render a chart using the react-froalaCharts component.

Setting up a React project

You need to have a react project setup before proceeding any further. If not, you can follow the below steps to initiate the project.

Follow the steps given to initiate the project. One of the best ways to set up the development environment is using create-react-app. Find more about it here.

Open the terminal and run:

npx create-react-app first-froalacharts-project
cd first-froalacharts-project
npm start

first-froalacharts-project is the working directory where React Boilerplate will be installed along with all the utilities and dependencies.

The working directory should contain a package.json. If the package is not present, you can create it using the npm init -y command.

Now, open http://localhost:3000/ to see your React app.

Installation and including dependencies

Install the react-froalacharts and froalacharts modules using the following command:

npm install froalacharts react-froalacharts --save

After installing the froalacharts components, you can replace the code in App.js file with the code shown in the steps below to create your first chart. Import all the required dependencies to get started.

// Step 1 - Include react
import React from "react";

// Step 2 - Include the react-froalacharts component
import ReactFC from "react-froalacharts";

// Step 3 - Include the froalacharts library
import FroalaCharts from "froalacharts";

// Step 4 - Include the chart type
import Column from "froalacharts/froalacharts.charts";

// Step 5 - Include the theme as froala
import FroalaTheme from "froalacharts/themes/froalacharts.theme.froala";

// Step 6 - Adding the chart and theme as dependency to the core froalacharts
ReactFC.fcRoot(FroalaCharts, FroalaTheme);

Preparing the data

Let's create a chart showing a "Comparison of Quarterly Revenue".

Since we are plotting a single dataset, create a column chart with 'Quarter' as data labels along the x-axis and 'Revenues (In USD)' as data values along y-axis.

Froala Charts accepts the data in JSON format. The data for the chart is represented in the following way:

const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];

Configure your chart

Next, work on the styling, positioning and giving your chart a context.

// Create a JSON object to store the chart configurations
const chartConfig = {
  //Specify the chart type
  type: "column",
  //Set the container object
  renderAt: "ft",
  //Specify chart dimensions
  width: "800",
  height: "500",
  //Set the type of data
  dataSource: {
    chart: {
      //Set the theme for your chart
      theme: "froala",
      //Set the chart caption
      caption: "Comparison of Quarterly Revenue",
      //Set the x-axis name
      xAxisname: "Quarter",
      //Set the y-axis name
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$",
    },
    categories: [
      {
        category: [
          {
            label: "Q1",
          },
          {
            label: "Q2",
          },
          {
            label: "Q3",
          },
          {
            label: "Q4",
          }
        ]
      }
    ],
    dataset: chartData
  }
};

//Step 1 - Include react
import React from "react";

//Include the react-froalacharts component
import ReactFC from "react-froalacharts";

//Include the froalacharts library
import FroalaCharts from "froalacharts";

//Include the chart type
import Column from "froalacharts/froalacharts.charts";

//Include the theme as froala
import FroalaTheme from "froalacharts/themes/froalacharts.theme.froala";

//Adding the chart and theme as dependency to the core froalacharts
ReactFC.fcRoot(FroalaCharts, FroalaTheme);

//Step 2 - Preparing the chart data
const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];

//Step 3 - Create a JSON object to store the chart configurations
const chartConfig = {
  
  //Specify the chart type
  type: 'column',
  
  //Set the container object
  renderAt: 'ft',
  
  //Specify chart dimensions
  width: '800',
  height: '500',
  
  //Set the type of data
  dataSource:
  {
    chart:
    {
      //Set the theme for your chart
      theme: "froala",
      //Set the chart caption
      caption: "Comparison of Quarterly Revenue",
      //Set the x-axis name
      xAxisname: "Quarter",
      //Set the y-axis name
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$"
    },
    categories: [
    {
      category: [
      {
        label: "Q1"
      },
      {
        label: "Q2"
      },
      {
        label: "Q3"
      },
      {
        label: "Q4"
      }]
    }],
  }
};

//Step 4 - Creating the DOM element to pass the react-froalacharts component
class App extends React.Component
  {
    render() {
      return (<ReactFC {...chartConfigs} />);
      }
    }
    export default App;

Next Steps

Explore the List of Charts.

Dive into the API documentation.

Learn about other Concepts.