width: Number

Sets the Chart Width to any given value in Pixels

Default: Takes chart container’s width by default.
Example: 380, 500, 720
Notes
  • We suggest not to set width/height property unless it is really required. When you don’t set the width/height, CanvasJS automatically takes the size of its container and hence works well with responsive websites where container’s size might change depending on the device from which it is being used.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 width: 320,
 .
 .
});
chart.render();

Try Editing The Code

  Also See:    

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

18 Comments

  1. Rajesh says:

    Due to multiple records few of records(columns) get hide in left section of graph and right section of the graph.

  2. jayant says:

    i had created two charts in one page but it shows only once in one time. How can i show both chart in one page at one time.

    • Sunil Urs says:

      As of now it is not possible to reduce/set width of individual bars. They are decided automatically based on the number of dataPoints.

    • Air8426 says:

      Example for horizontal bar.
      1. you need to define the height of single bar, and calculate all bar height.
      such as
      var _height = arr.length * 50; // 50 means bar height

      2. to define height of the html body.
      ex.
      $(‘#chartContainer’).attr(‘style’,”height: “+ _height+”px; width: 100%;”);

      3. set the parameter ‘height’ with CanvasJS.Chart
      ex.
      var chart = new CanvasJS.Chart(“chartContainer”,
      {
      title:{text: chart_title },
      height : _height,
      …
      }

      try it :D

  5. madhu says:

    I have increased my column graph width but for last bars tool tip is not visible . ie it will not be displayed after some width.

    • Anjali says:

      mauricio,

      When you have more number of columns then chart automatically skips some of the labels to avoid overlapping. But you can force it to show all labels by setting interval property of axisX to 1.

    • Naveen Venugopal says:

      Currently only pixel value can be set to width, we will support percent value in our future version.

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