width: Number

Sets the Chart Width to any given value in Pixels


Default: Takes chart container’s width by default. If the width is not set for the chart container, defaults to 500.
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 it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 18

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

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

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

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

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

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

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

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.