height: Number

Sets the height of the Chart


Default: Takes chart container’s height by default. If the height is not set for the chart container, defaults to 400.

Example: 260, 300, 400

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",
{
 .
 .
 height: 260,
 .
 .
});
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 9

  1. Is there a way to make the aspect ratio responsive? Responsive height currently seems to just resize the height based on the current width — it does not adjust to the container’s width.j

    • jon,

      In case you meant changing the height should also change its width by keeping the aspect ratio same, it is not possible. You need to set both height and width separately.

      • I do want the aspect ratio to change. It seems that when I put the chart in a container, and the container resizes, it tries to maintain the aspect ratio…so if I resize the height of the container so that it’s much taller, it leaves a bunch of whitespace below the chart. Conversely, if I make the container very “short”, it will cut off the chart.

        Currently it seems that the size of the chart is determined by the width only, and height is a dependent.

      • OK I looked again in the forum and figured out how to get the behavior I was looking for. I set my chart div to:

        –Jon

          • Lokesh,

            Chart simply takes the size of its container whenever the window is resized – library doesn’t try to change the container’s size. Hence you need to change the container’s height as required and the chart will automatically resize on window resize event. You can also call chart.render() to force the chart to readjust its size at any time.

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.