How to create the Circular Gauge with smaller canvas?

Description

You can render/create the Circular Gauge with smaller canvas (minimum height and minimum width).

Solution

When the Circular Gauge with minimum size is rendered/created, you need to set the radius and scale radius values based on the Height and Width values. By default, radius and scale radius values are set to “180”; height and width values are “360”. Normally, the height and width values of the Circular Gauge are double or above the doubled radius value.

Therefore, when you set the customized radius value that is minimum/maximum when compared to the default value, the height and width values should be double or above the doubled radius value.

For example, when you set the Height and Width values as 120, you need to set the radius and scale radius values as 60. You can refer to the following code example to create the Circular Gauge with smaller canvas.

          $("#CoreCircularGauge").ejCircularGauge({
                width: 120,
                height: 120,
                radius: 60,   // set radius value as half of the height or width value
                scales: [{ radius: 60 }]   // Give scale radius value half of the height or width value
            });

Execute the example and the Circular Gauge is rendered as follows.

Sample link

http://www.syncfusion.com/downloads/support/directtrac/134909/default710074039.zip