Resizing
Overview
We have tried to create a system that allows you to create a gauge of any size without any hassles and hurdles, please study Positioning tutorial to understand relative coordinates if you haven't already done that.
In general resizing a gauge is simply changing its size, however there are certain limitations:
- You should keep in mind proportions of a gauge.
- For a horizontal gauge - you should keep height less than width, though it is not restricted.
- You should think of embedded font if you need totally resizable gauge.
Fixed Size
You have the easiest case when your gauge has a fixed size in your application, all you need to do is to choose the size of your gauge and configure it in a way that suits best. Just keep in mind that all sizes and padding you set are, actually, percents of actual height or width that you specify when embedding a gauge.
Let's assume you've set all chart margins to zero and set width of gauge to "200px" and height to "50px' - in this case <axis size="50" position="60"> means that axis bar has height of "25px" and symmetry line of an axis is placed "60px" below the top of a gauge. Setting align="Inside" would mean that an element is placed "35px" (60 - 25 = 35) below the top of a gauge.
An illustration below gives a visual explanation:
Resizable
As you understand, the fact that all coordinates in gauge are relative - you can always change the size of a gauge to make it bigger or smaller - the only thing you should not forget is a proportion between width and height.
For example you have created a gauge with the width of "200px" and height="100px", the proportion is 2/1 and if you want to make it bigger you should increase width and height keeping this proportion intact (if you make width="300px", then make height="150"), if you wouldn't do this - gauge can distorted.
Please look at the sample in the end of this article to understand how resizing works.
Scalable Fonts
As you may notice in the samples above not only element, but also the text in labels is scaled. It is done using Embedded fonts feature, which allows you to resize gauge anyhow and text wouldn't overlap anything or wouldn't be to small. Sometimes this option is applicable and sometimes - it is not, you need to look at the result and decide whether to use embedded fonts or not.
When you use a system font for gauge labels - they will always of the size you specify ("14pt", for example), but when you use embedded fonts - their size is set in the coordinates every other element uses, so, of gauge is made twice bigger - labels size would be twice bigger as well.
Please look at the sample in the end of this article to understand the difference between system and embedded fonts in gauges.
Sample
This sample tries to give an understanding of all resizing issues: