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 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.

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

Testing Installation

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

  <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 }


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

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

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

Comments 25

  1. 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

      • 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,
        text: “Simple Column Chart”
        { text: “This is a Subtitle”
        //Uncomment properties below to see how they behave
        //fontColor: “red”,
        //fontSize: 30
        title:”Axis X title”,
        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 }


  2. 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:

    Thank you.

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

  3. 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. SCRIPT5007: Unable to get property ‘style’ of undefined or null reference
    canvasjs.min.js, line 56 character 54

      • 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.

        • 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.

    • 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.

  5. 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