# Graduated bar Examples and Reference

### Default Graduated bar

An example of a default Graduated bar without any extra properties.

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

    app <- Dash$new()

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

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

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

    app$run_server()

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

### Orientation

Change the orientation of the bar to vertical `vertical=TRUE`.

    library(dashDaq)

    daqGraduatedBar(
        vertical = TRUE,
        value = 10
    )

### Size

Manually adjust the size of the bar in pixels with `size`.

    library(dashDaq)

    daqGraduatedBar(
        size = 200,
        value = 10
    )

### Max

Manually set a maximum value with `max`.

    library(dashDaq)

    daqGraduatedBar(
        max = 100,
        value = 50)

### Step

Manually set the step size of each bar with `step`.

    library(dashDaq)

    daqGraduatedBar(
        step = 2,
        max = 100,
        value = 50
    )

### Show Current Value

Display the current value of the graduated bar with `showCurrentValue=TRUE`.

    library(dashDaq)

    daqGraduatedBar(
        showCurrentValue = TRUE,
        max = 100,
        value = 38
    )

38%

### Color Range

Set a color range with:

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

    library(dashDaq)

    daqGraduatedBar(
      color = list(
        "ranges" = list(
          "green" = list(0, 4),
          "yellow" = list(4, 7),
          "red" = list(7, 10)
        )
      ),
      showCurrentValue = TRUE,
      value = 10
    )

100%

### Color Gradient

Set a color gradient with:

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

    library(dashDaq)

    daqGraduatedBar(
      color = list(
        "gradient" = TRUE,
        "ranges" = list(
          "green" = list(0, 4),
          "yellow" = list(4, 7),
          "red" = list(7, 10)
        )
      ),
      showCurrentValue = TRUE,
      value = 10
    )

100%

## GraduatedBar 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 the graduated bar.

`color` (named list; default `light.primary`): Color configuration for the graduated bar's progress blocks.

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

- `default` (character; optional): Fallback color to use when color.ranges has gaps.

- `gradient` (logical; optional): Display ranges as a gradient between given colors. Requires color.ranges to be contiguous along the entirety of the graduated bar's range of values.

- `ranges` (named list; optional): Define multiple color ranges on the graduated bar's track. The key determines the color of the range and the value is the start,end of the range itself.

  `ranges` is a named list with keys:

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

`size` (numeric; default `250`): The size (length) of the graduated bar in pixels.

`vertical` (logical; optional): If TRUE, will display bar vertically instead of horizontally.

`min` (numeric; default `0`): The minimum value of the graduated bar.

`max` (numeric; default `10`): The maximum value of the graduated bar.

`step` (numeric; default `0.5`): Value by which progress blocks appear.

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

`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.

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

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