# Gauge charts documentation

- Example
- Properties

## Example

    <script>
        window.onload = function ()
        {
            // Create the chart. The values are: the canvas tag ID,  the minimum, the maximum and the actual value.
            var gauge = new OfficeExcel.Gauge('cvs', 0, 100, 46);

            // Configure the chart to appear as wished
            gauge.Set('chart.title', 'Bandwidth');

            // Now call the .Draw() method to draw the chart.
            gauge.Draw();
        }
    </script>

The example file is here.

## Properties

You can use these properties to control how the Gauge chart apears. You can set them by using the Set() method. Eg:

myGauge.Set('name', 'value');

- Margins
- Labels and text
- Titles
- Scale
- Colors
- Needle
- Miscellaneous

### Margins

chart.gutter.left
The left gutter of the chart.
Default: 5
chart.gutter.right
The right gutter of the chart.
Default: 5
chart.gutter.top
The top gutter of the chart.
Default: 5
chart.gutter.bottom
The bottom gutter of the chart.
Default: 5

### Labels and text

chart.text.font
The font that is used for the text.
Default: Verdana
chart.text.color
The color of the text.
Default: #666
chart.text.size
The size of the text
Default: 10

### Titles

chart.title.top
The top title of the chart, if any.
Default: (An empty string)
chart.title.top.font
The font that the top title is rendered in. If not specified the chart.text.font setting is used (usually Arial)
Default: Arial
chart.title.top.size
The size of the top title. If not specified the size is usually 2pt bigger than the chart.text.size setting.
Default: 14
chart.title.top.bold
Whether the top title is bold or not.
Default: true
chart.title.top.color
The color that the top title is rendered in.
Default: #333
chart.title.top.pos
If set this number is multiplied with the radius to give the Y position of the title. This allows to totally override the Y position of the title.
Default: null
chart.title.bottom
The bottom title of the chart, if any.
Default: (An empty string)
chart.title.bottom.font
The font that the bottom title is rendered in. If not specified the chart.text.font setting is used (usually Arial)
Default: Arial
chart.title.bottom.size
The size of the bottom title. If not specified the size is usually 2pt bigger than the chart.text.size setting.
Default: 14
chart.title.bottom.bold
Whether the bottom title is bold or not.
Default: true
chart.title.bottom.color
The color that the bottom title is rendered in.
Default: #333
chart.title.bottom.pos
If set this number is multiplied with the radius to give the Y position of the title. This allows to totally override the Y position of the title.
Default: null

### Scale

chart.scale.decimals
The number of decimal places to display for the Y scale.
Default: 0
chart.scale.point
The character used as the decimal point.
Default: .
chart.scale.thousand
The character used as the thousand separator
Default: ,
chart.units.pre
The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
Default: '' (An empty string)
chart.units.post
The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
Default: '' (An empty string)

### Colors

chart.red.start
The point at which the red area starts.
Default: 90% of the max
chart.red.color
The red color.
Default: #DC3912
chart.yellow.color
The yellow color.
Default: #FF9900
chart.green.end
The point at which the green area ends.
Default: 70% of the max
chart.green.color
The green color.
Default: rgba(0,0,0,0)
chart.border.outer
This is the color of the outer border.
Default: #ccc
chart.border.inner
This is the color of the inner border.
Default: #f1f1f1

### Needle

chart.needle.tail
Whether the tail for the needle is shown.
Default: false
chart.needle.color
This is the color of the needle.
Default: #D5604D
chart.centerpin.color
This is the color used in the centerpin gradient coloring.
Default: blue
chart.centerpin.radius
This is ths radius of the centerpin.
Default: null

### Miscellaneous

chart.border.width
The width of the border that goes around the Gauge.
Default: 10
chart.tickmarks.small
The number of small tickmarks on the chart.
Default: 25
chart.tickmarks.big
The number of big tickmarks on the chart. If you specify this you will actually get one more than the number of tickmarks than you specify. So if you specify 5, you'll get 6 tickmarks because of the end tickmarks.
Default: 25