Home Forums Chart Support CanvasJS in Angular 6

CanvasJS in Angular 6

Viewing 6 posts - 1 through 6 (of 6 total)
  • #24996

    Hi i’ve been using canvasjs for a long time in php and javascript. Does CanvasJS supports Angular 6? Thank you very much…



    CanvasJS Charts & StockCharts works with all versions of Angular / AngularJS including Angular 6. Below are the steps to integrate CanvasJS Chart / StockChart in your angular app.
    1. Save canvasjs.min.js (canvasjs.stock.min.js incase of StockChart) within source-folder of your Angular application ( src or src/assets or src/lib )
    2. Import the library into your app.
    For Chart: import * as CanvasJS from './canvasjs.min';
    For StockChart: import * as CanvasJS from './canvasjs.stock.min';

    Please check out Angular Gallery for examples on integrating charts in Angular app.

    Angular Column / Bar Chart

    Vishwas R
    Team CanvasJS


    Hi Vishwas, can you help me implement the chart which the data comes from json (NOT EXTERNAL JSON) in Angular 6. I’ve seen the Angular Gallery but I want to achieve the chart using the json output of my application not on an external json.



    Parsing the dataPoints to the format accepted by CanvasJS before passing it to chart-options should work fine in this case.

    for (var i = 0; i <= result.length - 1; i++) {
      dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });

    Please take a look at this JSFiddle for rendering chart from JSON object.
    column chart from JSON data

    If you are still facing issue, kindly share sample project along with sample JSON over Google-Drive or Onedrive, so that we can look into it and help you out.

    Vishwas R
    Team CanvasJS


    Hi Vishwas, yep parsing dataPoints before passing to chart options should work fine and I already implemented it in php and javascript. My problem here now is that I’m using Angular 6. Can you do me a favor to create a sample chart given with this json which is the output of my application.


    Thank you very much… Kudos to your team… Great support.

    PS. any chart data you would like to generate based on my json would be fine to me…



    based on the JSON that you have shared, passing name as label and age as y-value should work fine. Below is the code snippet.

    function parseData(jsonData){
    	for(var i = 0; i < jsonData.length; i++) {
    		dataPoints.push({ label: jsonData[i].name, y: Number(jsonData[i].age)});

    Please take a look at this updated sample project for working code.

    Vishwas R
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.