Skip to content

Create a Chart in Vue

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 FroalaCharts. The vue-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 vue-froalacharts component.

Prerequisite

You can follow the below steps to initiate a Vue.js project or else you can skip this step and proceed on by including the dependencies from CDN or Local Files.

One of the best ways to setup the development environment is through vue-cli. Find more about it here. Install vue.js globally in your local machine with npm using vue-cli

npm install -g @vue/cli

Open the terminal and run:

vue create first-froalacharts-project
cd first-froalacharts-project
npm run serve

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

Now, open http://localhost:8080/ to see your Vue.js app.

Installation and including dependencies

To install froalacharts and the vue-froalacharts components via npm follow the steps below.

npm install froalacharts vue-froalacharts --save

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

// Include Dependencies
import Vue from 'vue';
import VueFroalaCharts from 'vue-froalacharts';
import FroalaCharts from 'froalacharts';
import FroalaTheme from 'froalacharts/themes/froalacharts.theme.froala';

Vue.use(VueFroalaCharts, FroalaCharts, FroalaTheme);

Preparing the data

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

QuarterRevenues
Q110000
Q211500
Q312500
Q415000

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

Render the chart

The consolidated code to render the chart is shown below:

<script>
import Vue from 'vue';
import VueFroalaCharts from 'vue-froalacharts';
import FroalaCharts from 'froalacharts';
import FroalaTheme from 'froalacharts/themes/froalacharts.theme.froala';
Vue.use(VueFroalaCharts, FroalaCharts, FroalaTheme);
const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];
const chartConfig = {
  type: "column",
  renderAt: "ft",
  width: "800",
  height: "500",
  dataSource:
  {
    chart:
    {
      theme: "froala",
      caption: "Comparison of Quarterly Revenue",
      xAxisname: "Quarter",
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$",
    },
    categories: [
    {
      category: [
      {
        label: "Q1",
      },
      {
        label: "Q2",
      },
      {
        label: "Q3",
      },
      {
        label: "Q4",
      }]
    }],
    dataset: chartData
  }
};
export default
{
  name: 'app',
  data() {
    return {
      "type": "column",
      "renderAt": "chart-container",
      "width": "550",
      "height": "350",
      "dataFormat": "json",
      dataSource
    }
  }
} </script> 

<template> 
  <div id = "app"> 
    <div id = "chart-container"> 
      <froalacharts
      :type = "type"
      :width = "width"
      :height = "height"
      :dataformat = "dataFormat"
      :dataSource = "dataSource"
	  > 
      </froalacharts>  
	 </div> 
	</div>  
</template>

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.