-
Notifications
You must be signed in to change notification settings - Fork 141
125_Canvas_dimensions
Previous Page Next Page Table of content
The dimension of the canvas is specified through the height and the width property of the canvas. In this chapter, we will give some guidelines on how to define smartly the dimensions of the canvas.
See : Samples/sizeOfCanvas.html
With the simplest method, you specify the dimensions in pixels.
Example : <canvas id="mycanvas" height=250 width=600/>
With such a definition, if the option "responsive" is set to false (=default value for option responsive), the width of the chart will be the number of pixels as specified in the definition.
If the option "responsive" is set to true for the chart drawn in such canvas, the width of the chart will automatically fit the width of the container it belong (=the width of the window if no container).
By default, the height of the chart will be increased at the same scale than the width : if the width of the responsive chart is doubled, the height will also be doubled. This behavior is ensured by option "maintainAspectRatio" which has a default value of true. If you want to keep the height of the chart unchanged (why not ?), set the value of option "maintainAspectRatio" to false.
Dimension can also be defined within a style definition. But, you should only define the width in the style definition (otherwise, the chart will not be correctly drawn through ChartNew.js). The advantage of defining the width through style is that you can define the width has a percentage of the width of the container that the canvas belong. If the window is resized, the size of the chart is automatically adapted.
Example : <canvas id="mycanvas" height=250 style="width:50%"/>
When the width is defined as a percentage, you should set option "responsive" to true otherwise the chart will have some blured design when the size of the window is changed.
At first display (what ever the width of the window have), the height of the chart will be the height specified in the canvas definition (250px in our sample).If the width of the window is changed, the height of the chart will be adapted if option maintainAspectRatio is set to true (=defaulf value for this option).
When the width is defined as a percentage of the container width, you probably want that height of the chart is also a percentage of something. In ChartNew.js, you can use option forcedAspectRatio. If you set option forcedAspectRatio to 1, the height of the chart will be same as the width. If you set forcedAspectRatio to "0.5", the height of the chart will be the half of the width. You can set forcedAspectRatio to any positive value that you want. A value of 0 means that the height of the chart is the height specified in the canvas definition.
Example :
<style> #mycanvas { width: 50%; } </style> <canvas id="mycanvas" height=250/>
Such a definition is similar to define the width in a style inside the canvas definition.
There are several methods for specifying the dimensions of the canvas. Up to you to choose the most appropriate that you want.
See also options defined in 100_015_ResponsiveChart.