Downloading CanvasJS

There are two Source files that come in the downloaded Zip folder

    1. Uncompressed file – canvasjs.js (available only in the Paid Version)
    2. Compressed file – canvasjs.min.js

Download CanvasJS library from here. Extract the downloaded file and put the content in the same folder as the html file.


Adding CanvasJS to Your Web Pages

Include the file inside the <head> tag of your web page.
You can Include Any of the above two Javascript files. While its ok to use uncompressed version on the development machine, its recommended to use compressed version in the production environment. 


<head>
  <script type="text/javascript" src="canvasjs.min.js"></script>
</head>

Testing Installation

Create an HTML file in the same directory as the library and copy the following code into it.

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="canvasjs.min.js"></script>
  <script type="text/javascript">
	  window.onload = function () {
		  var chart = new CanvasJS.Chart("chartContainer", {
			  data: [
			  {
				  type: "column",
				  dataPoints: [
				  { x: 10, y: 10 },
				  { x: 20, y: 15 },
				  { x: 30, y: 25 },
				  { x: 40, y: 30 },
				  { x: 50, y: 28 }
				  ]
			  }
			  ]
		  });

		  chart.render();
	  }
  </script>
</head>

<body>
  <div id="chartContainer" style="height: 500px; width: 50%;"></div>
</body>
</html>

Save the file, and Open it in a Browser. A Column Chart Should Render on the browser.

1. Install CanvasJS Charts

Install CanvasJS Charts Package from NPM package manager.

npm install @canvasjs/charts

2. Import Chart

As CanvasJS Charts package is installed, it can be imported using different module formats like AMD, CommonJS, etc.

import CanvasJS from '@canvasjs/charts';

3. Define container for the chart

Define a div (chart-container) where chart has to be rendered.

<div id="chartContainer"></div>

4. Create & Render the chart

Create chart by passing the container-id of the div that you created in the previous step and chart-options. Once the chart is created, render the chart by calling chart.render();

//Create Chart
var chart = new CanvasJS.Chart("container", {
  //Chart Options - Check https://canvasjs.com/docs/charts/chart-options/
  title:{
  text: "Basic Column Chart in JavaScript"              
  },
  data: [{
  type: "column",
  dataPoints: [
	{ label: "apple",  y: 10  },
	{ label: "orange", y: 15  },
	{ label: "banana", y: 25  },
	{ label: "mango",  y: 30  },
	{ label: "grape",  y: 28  }
  ]
  }]
});
//Render Chart
chart.render();
If you have any questions, please feel free to ask in our forums.Ask Question

25 Comments

  1. canvasuser says:

    Hi Sunil,
    I want to pass the “chartContainer” dynamically, how can i do that, when i pass it as a varibale its throwing a error

      • Andy says:

        Hi,

        I am integrating canvasjs charts in oracle apex plugins. I would like to pass the container ID that is system-generated to the CavasJS.Chart. Is there any workaround for this?

        // Create and draw the chart
        function renderChart() {
        var chart = new CanvasJS.Chart( pRegionId, {
        theme: “theme2”, // Options: “theme1″,”theme2″, “theme3″
        exportEnabled: true,
        animationEnabled: true,
        title:{
        text: “Simple Column Chart”
        },
        subtitles:[
        { text: “This is a Subtitle”
        //Uncomment properties below to see how they behave
        //fontColor: “red”,
        //fontSize: 30
        }
        ],
        axisX:{
        title:”Axis X title”,
        },
        axisY:{
        title:”Axis Y Title”,
        },
        legend: {
        horizontalAlign: “left”, // “center” , “right”
        verticalAlign: “center”, // “top” , “bottom”
        fontSize: 15
        },
        data: [
        {
        type: “column”, //change type to bar, line, area, pie, etc
        indexLabel: “{y}”,
        indexLabelPlacement: “outside”,
        indexLabelOrientation: “horizontal”,
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
        ]
        }
        ]
        });

        chart.render();
        }

  2. DrGeek says:

    Do the names have to be *exactly* chart, chartcontainer, or can they be different names? So that instead of chart, it could be foo, and with multiple charts on one page, it could be foo1, foocontainer1, foo2, foocontainer2, as suggested here: http://jsfiddle.net/canvasjs/U6DAe/.

    Thank you.

    • Sunil Urs says:

      You can use any name that you prefer. We are using chart & chartContainer everywhere just to have some consistency

  3. yhf says:

    I’ve got 2 “div”, and I want to put 2 charts in that 2 “div”. However, only the first chart can be displayed, the second one cannot be loaded. How can i solve it?

  4. anwy says:

    SCRIPT5007: Unable to get property ‘style’ of undefined or null reference
    canvasjs.min.js, line 56 character 54

      • Sunil Urs says:

        Can you please create a new thread in forum with a JSFiddle that can help us reproduce the issue? Also please let us know your browser, browser version and OS.

        • Anjali says:

          Gampala,

          We are not getting this error at our end so not able to reproduce the issue. If you are getting the same error, please create a jsfiddle with your code so that we can have a look.

    • Anjali says:

      pedro,

      Yes, whenever the browser’s size changes chart resizes itself based on the container’s new width or height. You can also explicitly call chart.render() to update its size.

  9. Alex says:

    it drives me nuts, I am getting Uncaught TypeError: $(…).CanvasJSChart is not a function although I don’t have any errors on the link to your files so my HTML file sees it alright. I am about to give up. This is basic install problem, you guys should make sure those things don’t happen. There is no way I can troubleshoot it.

If you have any questions, please feel free to ask in our forums. Ask Question