Home Forums Chart Support Angular 8 With CanvasJs and WEB API(NODE JS) Reply To: Angular 8 With CanvasJs and WEB API(NODE JS)



To create a Dynamic chart in Angular you need to first get data from an external source and render the chart as shown below-

let dataPoints = [];
let dpsLength = 0;
let chart = new CanvasJS.Chart("chartContainer",{
  exportEnabled: true,
    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;

Then call updateChart method for every second. Each time updateChart is called, it gets the data, adds it to dataPoint, and calls chart.render()

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) {
        x: parseInt(value[0]),
        y: parseInt(value[1])

    if (dataPoints.length >  20 ) {
    setTimeout(function(){updateChart()}, 1000);

Kindly take a look at the “Dynamic Charts” example in the Angular gallery for rendering dynamic chart from an external/Web API in Angular.

dynamic chart in angular 8

Indranil Deo
Team CanvasJS