# Gauge Plots Learn how to configure gauge charts with ActiveReportsJS ## Content `Gauge plots`, also known as speedometer or dial plots, are suitable for visualizing a single data point within a specified range, often in relation to a target or goal. These plots are particularly useful when you want to communicate progress or performance in a visually appealing manner. For instance, the plot in the [Gauge Plot Demo](https://developer.mescius.com/activereportsjs/demos/Reports/GaugePlot/purejs) provides a visual representation of customer satisfaction levels across four different aspects of a product or service: `Product Quality`, `Delivery Speed`, `Ease of Use`, and `Pricing`. The plot uses a color-coded scale, where satisfaction scores range from `1 (Very Dissatisfied)` to `100 (Very Satisfied)`. ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.d5c985.png) ### Chart Wizard If you [add a chart](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#adding-a-chart) into a report, set the plot type to `Gauge` on the first screen of the `Chart Wizard`, and click the `Next` button, the wizard shows the `Gauge Settings` screen that looks like the following ![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.42a0af.png) The `Fields` editor lets you define the scale ranges for the gauge. The `Gauge Pointer` editor enables you to establish the value indicated by the pointer. The `Gauge Label` editor helps you customize the text displayed within the gauge. ### Values The `Values` collection for the Gauge plot establishes the divisions on the gauge's scale. Each `Value` represents the upper bound of the range. The values should be specified in the descending order – from the largest to the smallest value. The plot picks up colors for ranges from the [Chart Palette](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#general-chart-configuration). For each Value, you can specify the `CAPTION` property that will be displayed in the Legend if you set the `Show Values Names in Legend` flag in the plot properties. For example, in the [Gauge Plot Demo](/activereportsjs/demos/Reports/GaugePlot/purejs), four named values are used to set up the scale ranges: `100`, `75`, `50`, and `25`. As a result, you will observe four distinct intervals, each with a different color, on the gauge scale and the legend displaying the intervals' names. ### Axes A gauge plot includes the `Y axis` that allows you to configure the appearance of the labels on the gauge's scale and other properties as described in the [axes' documentation](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes). ### Gauge Pointers The `Gauge Pointers` collection enables you to create multiple pointers to highlight specific points on the gauge scale. For each pointer, you can customize these properties: * The `Background Color` expression sets the fill color for a pointer. * The `Needle Width` length value determines the pointer's size. * The `Needle Pin Width` length value adjusts the size of the circle situated at the base of a pointer. * The `End` expression specifies the value represented by the pointer. For example, in the [Gauge Plot Demo](/activereportsjs/demos/Reports/GaugePlot/purejs), the pointer's `End` is set to the `{satisfaction_score}` expression so that the pointer represents the score of the current aspect. ### Gauge Labels The `Gauge Labels` collection enables you to include text elements that appear within the gauge. For each label, you can configure the following properties: * The `Text` expression sets the content of the label. * The `Offset X` and `Offset Y` length values determine the label's position relative to the gauge's center. * The subset of the [text properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) allow you to customize the appearance of the label. For instance, in the Gauge demo, the sole label's Text is configured with the `{aspect}` expression, ensuring that the current aspect is displayed close to the pointer. ### Gauge Appearance The properties below help customize the appearance of a `Gauge` plot. See their effects in action by adjusting the configuration in the [Gauge Plot Demo](/activereportsjs/demos/Reports/GaugePlot/purejs). * `Opacity`: a [number](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar) expressed as a percentage, which sets the opacity of the gauge scale and pointers. `100%` means opaque, and `0%` means fully transparent. * `Inner Radius`: a [number](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar) representing the percentage of the outer radius that defines the space between the gauge scale and its center. * `Start Angle`: a [number](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar) in arc degrees specifying the plot's clockwise rotation. A full rotation is `360` degrees. * `Sweep`: a [number](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar) in arc degrees ranging from `0` to `360`, determining the arc length occupied by the plot. * `Clipping Mode`: defines how the [plot area](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area) renders a plot: * `Fit` means the plot area uses all available space to fit the plot. * `Clip` means the plot area truncates the plot at the edge of its right or bottom padding. * `None` is equivalent to `Fit`. * [Line](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties) properties in the `Style` section affect the appearance of the scale's range borders. * A color [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression) in the `Background` section determines the fill color of the scale's ranges, overriding the `Chart Palette` colors.