Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Create Charts in JavaScript

This document shows you how to install the FroalaCharts library and all the other dependencies on your system and render a chart using Plain JavaScript.

Prerequisites

If you are using Froalacharts dependencies from CDN or Local Files, you can skip to the next section.

If you choose to install the froalacharts package via npm, make sure you have Node.js installed in your system. Make sure you have a bundler like webpack and parcel or have browserify installed in your system.

Installation and including dependencies

You can install the froalacharts components following any of the methods below:

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.

Quarter Revenues
Q1 10000
Q2 11500
Q3 12500
Q4 15000

FroalaCharts 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
  }
};

Find the complete list of chart types with their respective alias here.

Render the chart

The consolidated code to render the chart is shown below:

See your chart

You should be able to see the chart as shown below.

Froala Charts will load here!

Next Steps

Explore the List of Charts.

Dive into the API documentation.

Learn about other Concepts.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_719625990" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1360419833" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_5923961" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>