Angular Charts & Graphs for your Web Applications. Charts are Responsive & support animation, zooming, panning, events, exporting chart as image, drilldown & real-time updates. Add 30+ chart types to your Angular / AngularJS Application including line, column, bar, pie, doughnut, range charts, stacked charts, stock charts, etc. To top it all off, it can render thousands of data-points without any performance lag.
Read More >>
/*app.component.ts*/ import { Component, OnInit } from '@angular/core'; import * as CanvasJS from './canvasjs.min'; //var CanvasJS = require('./canvasjs.min'); @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { ngOnInit() { let chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, title: { text: "Basic Column Chart in Angular" }, data: [{ type: "column", dataPoints: [ { y: 71, label: "Apple" }, { y: 55, label: "Mango" }, { y: 50, label: "Orange" }, { y: 65, label: "Banana" }, { y: 95, label: "Pineapple" }, { y: 68, label: "Pears" }, { y: 28, label: "Grapes" }, { y: 34, label: "Lychee" }, { y: 14, label: "Jackfruit" } ] }] }); chart.render(); } }
/*app.component.html*/ <div id="chartContainer" style="height: 370px; width: 100%;"></div>
CanvasJS supports 30+ Chart Types including line, area, bar, spline, pie, doughnut candlestick, etc. Checkout all chart types in our gallery.
/*app.component.ts*/ import { Component, OnInit } from '@angular/core'; import * as CanvasJS from './canvasjs.min'; //var CanvasJS = require('./canvasjs.min'); @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { ngOnInit() { let chart = new CanvasJS.Chart("chartContainer", { theme: "light2", animationEnabled: true, exportEnabled: true, title:{ text: "Monthly Expense" }, data: [{ type: "pie", showInLegend: true, toolTipContent: "<b>{name}</b>: ${y} (#percent%)", indexLabel: "{name} - #percent%", dataPoints: [ { y: 450, name: "Food" }, { y: 120, name: "Insurance" }, { y: 300, name: "Traveling" }, { y: 800, name: "Housing" }, { y: 150, name: "Education" }, { y: 150, name: "Shopping"}, { y: 250, name: "Others" } ] }] }); chart.render(); } }
/*app.component.html*/ <div id="chartContainer" style="height: 370px; width: 100%; margin-left:auto;margin-right:auto;"></div>
Render hundreds of thousands of Data Points without affecting the performance of your Web Applications! You can see live examples below. Also try Zooming & Panning to see the performance.
/*app.component.ts*/ import { Component, OnInit } from '@angular/core'; import * as CanvasJS from './canvasjs.min'; //var CanvasJS = require('./canvasjs.min'); @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { ngOnInit() { let dataPoints = []; let y = 0; for ( var i = 0; i < 10000; i++ ) { y += Math.round(5 + Math.random() * (-5 - 5)); dataPoints.push({ y: y}); } let chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: true, animationEnabled: true, exportEnabled: true, title: { text: "Performance Demo - 10000 DataPoints" }, subtitles:[{ text: "Try Zooming and Panning" }], data: [ { type: "line", dataPoints: dataPoints }] }); chart.render(); } }
Add Dynamic / Realtime Charts to your Angular Applications in minutes. Checkout the example below which updates chart from a JSON data source.
/*app.component.ts*/ import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; import * as CanvasJS from './canvasjs.min'; //var CanvasJS = require('./canvasjs.min'); @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { ngOnInit() { let dataPoints = []; let dpsLength = 0; let chart = new CanvasJS.Chart("chartContainer",{ exportEnabled: true, title:{ text:"Live Chart with Data-Points from External JSON" }, data: [{ type: "spline", dataPoints : dataPoints, }] }); $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=25&length=20&type=json&callback=?", function(data) { $.each(data, function(key, value){ dataPoints.push({x: value[0], y: parseInt(value[1])}); }); dpsLength = dataPoints.length; chart.render(); updateChart(); }); function updateChart() { $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + (dpsLength + 1) + "&ystart=" + (dataPoints[dataPoints.length - 1].y) + "&length=1&type=json&callback=?", function(data) { $.each(data, function(key, value) { dataPoints.push({ x: parseInt(value[0]), y: parseInt(value[1]) }); dpsLength++; }); if (dataPoints.length > 20 ) { dataPoints.shift(); } chart.render(); setTimeout(function(){updateChart()}, 1000); }); } }
Add StockCharts to your Angular Applications.
/*app.component.ts*/ import { Component, OnInit } from '@angular/core'; import * as $ from 'jquery'; import * as CanvasJS from './canvasjs.stock.min'; //var CanvasJS = require('./canvasjs.stock.min'); @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { addSymbols(e){ var suffixes = ["", "K", "M", "B"]; var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0); if(order > suffixes.length - 1) order = suffixes.length - 1; var suffix = suffixes[order]; return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix; } ngOnInit() { let dataPoints1 = [], dataPoints2 = [], dataPoints3 = []; let dpsLength = 0; let chart = new CanvasJS.StockChart("chartContainer",{ theme: "light2", exportEnabled: true, title:{ text:"Angular StockChart with Price & Volume" }, subtitles: [{ text: "ETH/USD" }], charts: [{ toolTip: { shared: true }, axisX: { lineThickness: 5, tickLength: 0, labelFormatter: function(e) { return ""; }, crosshair: { enabled: true, snapToDataPoint: true, labelFormatter: function(e) { return ""; } } }, axisY: { prefix: "$", tickLength: 0, title: "Etherium Price", }, legend: { verticalAlign: "top" }, data: [{ name: "Price", yValueFormatString: "$#,###.##", xValueFormatString: "MMM DD YYYY", type: "candlestick", dataPoints : dataPoints1 }] },{ height: 100, toolTip: { shared: true }, axisX: { crosshair: { enabled: true, snapToDataPoint: true, valueFormatString: "MMM DD YYYY" } }, axisY: { prefix: "$", tickLength: 0, title: "Volume", labelFormatter: this.addSymbols }, legend: { verticalAlign: "top" }, data: [{ name: "Volume", yValueFormatString: "$#,###.##", xValueFormatString: "MMM DD YYYY", dataPoints : dataPoints2 }] }], navigator: { data: [{ dataPoints: dataPoints3 }], slider: { minimum: new Date("2018-05-01"), maximum: new Date("2018-07-01") } } }); $.getJSON("https://canvasjs.com/data/docs/ethusd2018.json", function(data) { for(var i = 0; i < data.length; i++){ dataPoints1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});; dataPoints2.push({x: new Date(data[i].date), y: Number(data[i].volume_usd)}); dataPoints3.push({x: new Date(data[i].date), y: Number(data[i].close)}); } chart.render(); }); } }
/*app.component.html*/ <div id="chartContainer" style="height: 500px; width: 100%; margin-left:auto;margin-right:auto;"></div>