# Gauge Examples and Reference

### Default Gauge

An example of a default Gauge without any extra properties.

    library(dash)
    library(dashDaq)
    library(dashHtmlComponents)
    library(dashCoreComponents)

    app <- Dash$new()

    app$layout(htmlDiv(list(
      daqGauge(id = 'my-gauge',
               label = 'Default',
               value = 6),
      dccSlider(
        id = 'my-gauge-slider',
        min = 0,
        max = 10,
        step = 1,
        value = 5
      )
    )))

    app$callback(
      output(id = "my-gauge", property = "value"),
      params = list(input(id = "my-gauge-slider", property = "value")),

      update_output <- function(value) {
        return(value)
      }
    )

    app$run_server()

Default
0 1 2 3 4 5 6 7 8 9 10

### Minimum and Maximum

Specify the minimum and maximum values of the gauge, using the `min` and `max` properties. If the scale is logarithmic the minimum and maximum will represent an exponent.

    library(dashDaq)

    daqGauge(
        value = 5,
        label = "Default",
        max = 20,
        min = 0
    )

Default

### Current Value and Units

Show the current value of the gauge and the units with `showCurrentValue=TRUE` and `units=<units>`.

    library(dashDaq)

    daqGauge(
        showCurrentValue = TRUE,
        units = "MPH",
        value = 5,
        label = "Default",
        max = 10,
        min = 0
    )

Default
5.0
MPH

### Logarithmic Gauge

To set the scale of the gauge to logarithmic use the property `logarithmic=TRUE`.

    library(dashDaq)

    daqGauge(
        logarithmic = TRUE,
        value = 5,
        label = "Default",
        max = 10,
        min = 0
    )

Default

### Color

Set the color of the gauge by using the property `color=<hex_color>`.

    library(dashDaq)

    daqGauge(
        color = "#9B51E0",
        value = 2,
        label = "Default",
        max = 5,
        min = 0
    )

Default

### Color Gradient

Apply a color gradient to the gauge with the property:

    color = list(
        'gradient' = TRUE,
        'ranges' = list(
            '<color>' = list(<value>, <value>),
            '<color>' = list(<value>, <value>),
            '<color>' = list(<value>, <value>)
        )
    )

    library(dashDaq)

    daqGauge(
      color = list(
        "gradient" = TRUE,
        "ranges" = list(
          "green" = list(0, 6),
          "yellow" = list(6, 8),
          "red" = list(8, 10)
        )
      ),
      value = 2,
      label = "Default",
      max = 10,
      min = 0
    )

Default

### Size

Adjust the size of the gauge in pixels `size=200`.

    library(dashDaq)

    daqGauge(
        size = 200,
        value = 2,
        label = "Default"
    )

Default

### Scale

Modify where the scale starts, the label interval, and actual interval with the `scale` property.

    library(dashDaq)

    daqGauge(
        label = "Scale",
        scale = list("start" = 0, "interval" = 3, "labelInterval" = 2),
        value = 3,
        min=0,
        max=24
    )

Scale

## Gauge Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`id` (character; optional): The ID used to identify this compnent in Dash callbacks.

`value` (numeric; optional): The value of gauge. If logarithmic, the displayed value will be the logarithm of the inputted value.

`size` (numeric; default `208`): The size (diameter) of the gauge in pixels.

`min` (numeric; default `0`): The minimum value of the gauge. If logarithmic, represents the minimum exponent.

`max` (numeric; default `10`): The maximum value of the gauge. If logarithmic, represents the maximum exponent.

`base` (numeric; default `10`): Base to be used in logarithmic scale.

`logarithmic` (logical; optional): If set to TRUE, a logarithmic scale will be used.

`showCurrentValue` (logical; optional): If TRUE, the current value of the gauge will be displayed.

`digits` (numeric; default `1`): Number of digits for current value.

`units` (character; optional): Label for the current value.

`theme` (named list; default `light`): Theme configuration to be set by a ThemeProvider.

`label` (named list; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties.

`label` is a character | named list with keys:

- `label` (character; optional)

- `style` (named list; optional)

`labelPosition` (a value equal to: 'top' or 'bottom'; default `'top'`): Where the component label is positioned.

`scale` (named list; optional): Configuration for the component scale.

`scale` is a named list with keys:

- `custom` (named list; optional): Custom scale marks. The key determines the position and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.

  `custom` is a numeric | named list with keys:

  - `label` (character; optional)

  - `style` (character; optional)

- `interval` (numeric; optional): Interval by which the scale goes up. Attempts to dynamically divide min-max range by default.

- `labelInterval` (numeric; optional): Interval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).

- `start` (numeric; optional): Value to start the scale from. Defaults to min.

`color` (named list; optional): Color configuration for the gauge's track.

`color` is a character | named list with keys:

- `default` (character; optional): Color used for current value text and other minor accents.

- `gradient` (logical; optional): Display ranges as a gradient between given colors.

- `ranges` (named list; optional): Define multiple color ranges on the gauge's track. The key determines the color of the range and the value is the start,end of the range itself. Ranges must be contiguous along the entirety of the gauge's range of values.

  `ranges` is a named list with keys:

  - `color` (unnamed list of numerics | unnamed list of numericss; optional)

`className` (character; optional): Class to apply to the root component element.

`style` (named list; optional): Style to apply to the root component element.

`exceedMessage` (character; optional): Warning message when value exceed max.

`lagingMessage` (character; optional): Warning message when value is laging from min.

`textColor` (character; optional): text color for theme.