Nowadays, data is everywhere, and it is an important part of our lives. We collect, send, analyse, and do many other things with data. Data in itself is not visually appealing, but we can make it beautiful. Charts are one thing that can make data look beautiful and make it easier to understand and analyse. We can use different chart types to show data, depending on the type of data we are showing. In this article, we will see how to add, configure and use different chart types in Angular using CanvasJS angular charts.
Adding CanvasJS angular chart to project
Let's start by adding a CanvasJS angular chart component to the project. Download the component from the official download page. Copy the chart component files to the project. Generally, these files are kept under assets directory. Once copied, import & register the modules.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import * as CanvasJSAngularChart from './assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;
@NgModule({
declarations: [
AppComponent,
CanvasJSChart
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
As the modules are registered, you can start creating charts. Let's create and display a simple column chart in angular.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<canvasjs-chart [options]="chartOptions"></canvasjs-chart>'
})
export class AppComponent {
chartOptions = {
title: {
text: "Angular Column Chart"
},
data: [{
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
}
}
![]()
We first imported the CanvasJS chart component and then defined the options for the chart. CanvasJS takes the data to be plotted, along with other chart element customization options, as "chart-options." In the above example, you can observe that labels are passed to each datapoint, which is shown below every bar (vertical bar charts are called a column chart). The same can be changed to a horizontal bar or line or pie chart simply by changing the type property. The data is an array of objects where each dataseries is an object - this means if you pass multiple objects, it creates a chart with multiple series.
Line Chart
Line charts are a way to represent data in the form of lines. Often they are used to show trends, or to compare two different data sets. In the above sample chart that you created, just change type property to "line." That should create a line chart instead of a column chart. CanvasJS has different kinds of lines - regular lines, splines (similar to line except that the line is smooth), and step-lines (similar to line but line is in the form of steps/staircase).
chartOptions = {
title: {
text: "Angular Line Chart"
},
data: [{
type: "line",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
}
![]()
By filling the region between the base and the datapoints value, you can create an area chart. Component supports different area forms like area, range area, stacked area and gets clubbed with different types of lines to create more combinations.
Bar Chart
In a bar chart, data is represented in the form of rectangles - vertical or horizontal bars. The syntax is the same as a line chart's, but the type field takes different value. Bars can be vertical, called column charts, or horizontal, called bar charts. CanvasJS angular component has different kinds of bar charts like bar, range bar, stacked bar, stacked bar 100%, column, range column, stacked column, stacked column 100% and waterfall.
chartOptions = {
title: {
text: "Angular Bar Chart"
},
data: [{
type: "bar",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
}
Pie Chart
Pie charts are probably the most commonly used chart. This is where datapoints are represented as slices of a "pie." Each slice will show the relational proportion between the data points. Pie charts can be modified further to have a hollow space in the centre, making them look like donuts. Hence, this type of chart is also called a doughnut/donut chart.
chartOptions = {
title: {
text: "Angular Pie Chart"
},
data: [{
type: "pie",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
}
![]()
Financial Chart
Financial charts are generally used to show the stock data/trades. These are the most commonly used chart type in stock, forex, shares, etc. These charts will generally be dynamic charts, which means that they keep updating the latest data automatically by fetching data from some API.
chartOptions = {
title: {
text: "Angular Financial Chart"
},
data: [{
type: "candlestick",
dataPoints: [
{ label: "Jan", y: [1341.55, 1503.21, 1341.55, 1434.22] },
{ label: "Feb", y: [1462.00, 1532.10, 1271.00, 1339.32] },
{ label: "Mar", y: [1351.60, 1410.15, 1013.53, 1162.81] },
{ label: "Apr", y: [1122.00, 1359.98, 1079.81, 1348.66] },
{ label: "May", y: [1328.50, 1441.00, 1299.00, 1428.92] },
{ label: "Jun", y: [1418.39, 1475.94, 1347.01, 1413.60] },
{ label: "Jul", y: [1411.09, 1586.98, 1409.81, 1482.95] },
{ label: "Aug", y: [1486.64, 1659.21, 1458.65, 1634.18] },
{ label: "Sep", y: [1636.63, 1733.18, 1406.55, 1469.59] },
{ label: "Oct", y: [1484.27, 1687.00, 1436.00, 1621.01] },
{ label: "Nov", y: [1628.16, 1818.06, 1616.03, 1760.73] },
{ label: "Dec", y: [1774.36, 1847.19, 1699.00, 1751.88] }
]
}]
}
![]()
More Chart Types & Additional Examples
You can check out CanvasJS angular charts gallery page, where more working examples are shown with varieties of use-cases and customization. Also, complete customization options can be found on CanvasJS's documentation section.
Conclusion
CanvasJS's angular chart component makes it easy to showcase a variety of chart types in your application and dashboard. It also supports dynamic charts, making it easier to automate to show latest data always.