- Back to Docs
- Get Started
- Integrations
- Configuring your Charts
- List of Charts
- Chart Attributes
- API
- Options & Properties
- Methods
- Events
- Other References
- Concepts
- Browser and Technology Support
- Change Log
- License Activation
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".
Quarter | Revenues |
---|---|
Q1 | 10000 |
Q2 | 11500 |
Q3 | 12500 |
Q4 | 15000 |
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.