Chart Resizing Modes
Overview
The size of the AnyChart Stock Component chart on the page is defined when you embed it, using AnyChartStock JavaScript Library API. Sometimes you may need to resize it later, and depending on the task you may need different resizing modes. Component offers four modes, three of them are similar to the resizing modes used in Show Chart in Full Screen feature.
Setting size and resizing mode
Typical chart embedding code (as shown in Your first chart Tutorial) looks like that:
As you can see no width or height is specified and chart uses default settings, but there are several properties and methods in Java Script API for setting initial size, default size, resizing chart and setting resizing mode, they are:
| Properties | ||
|---|---|---|
| Property | Default | Description |
| width | "100%" | Chart width. |
| height | "100%" | Chart height. |
| resizing | { mode: "Recalculate", baseWidth: NaN, baseHeight: NaN, minWidth: NaN, minHeight: NaN, maxWidth: NaN, maxHeight: NaN } |
Sets resizing mode and its parameters. |
Note that properties can be set either to class and work as default for all charts created on the page:
and to chart instance which affects only the selected chart:
Method works only for chart instance:
| Methods | |
|---|---|
| Method | Description |
| setSize(width, height) | Resizes chart. |
So, you can set size and resizing mode when you embed chart and use method to resize chart when you need, for example:
Resizing modes
Resizing mode define how exactly resizing happens, see below the description of all modes.
Recalculate
When resizing mode is set to "Recalculate" chart changes as if it is created in the new size - it means that chart parameters are recalculated, like, for example, the number of axis labels, grid lines and so on. Recalculate mode is the default resizing mode.
Click on the image below to see how chart changes when it is resized in Recalculate mode:
Stretch
When resizing mode is set to "Stretch" the chart is stretched to the new size proportionally to the width and height of initial size or proportionally to baseWidth or baseHeight (if they are set).
Click on the picture below to see how chart changes in Stretch mode
Fit
In Fit mode chart resizes taking an account the initial dimensions and chart proportions remain unchanged, so if, for example, chart was square initially - it will be square when resized.
Click on the picture below to see how chart changes in Fit mode:
RecalculateByProportions
The RecalculateByProportions mode is a combination of Recalculate and Fit modes. The component preserves size proportions on resize like in Fit mode but recalculates to new width and height instead of scaling like in Recalculate mode.
Combined
To use resizing mode "Combined" you need to set minWidth/minHeight and maxWidth/maxHeight parameters. You can use both pairs or one of them. If the chart is resized to the size smaller than minWidth/minHeight or bigger than maxWidth/maxHeight - chart is resized in "Stretch" mode, if size falls into the range - it is resized in "Recalculate" mode.
Sample
All modes and the way of setting size and modes are demonstrated in the live sample: