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 Editing The Code

  Also See:    

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

9 Comments

  1. Jon says:

    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

    • Anjali says:

      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.

      • Jon says:

        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.

      • Jon says:

        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

          • Sanjoy says:

            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.

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