# Graduated bar Examples and Reference

### Default Graduated bar

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

    using Dash
    using DashDaq

    external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

    app = dash(external_stylesheets=external_stylesheets)

    app.layout = html_div([
      daq_graduatedbar(
          id="my-graduated-bar",
          label="Default",
          value=6
      ),
      dcc_slider(
          id="my-graduated-bar-slider",
          min=0,
          max=10,
          step=1,
          value=5
      ),
    ])

    callback!(app,
      Output("my-graduated-bar", "value"),
      [Input("my-graduated-bar-slider", "value")]
    ) do value
      return value
    end

    run_server(app, "0.0.0.0", debug=true)

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

### Orientation

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      vertical=true,
      value=10
    )

    run_server(app, "0.0.0.0", debug=true)

### Size

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      size=200,
      value=10
    )

    run_server(app, "0.0.0.0", debug=true)

### Max

Manually set a maximum value with `max`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      max=100,
      value=50
    )

    run_server(app, "0.0.0.0", debug=true)

### Step

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      step=2,
      max=100,
      value=50
    )

    run_server(app, "0.0.0.0", debug=true)

### Show Current Value

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      showCurrentValue=true,
      max=100,
      value=38
    )

    run_server(app, "0.0.0.0", debug=true)

38%

### Color Range

Set a color range with:

    color=Dict(
        "ranges" => Dict(
            "<color>" => [<value>, <value>],
            "<color>" => [<value>, <value>],
            "<color>" => [<value>, <value>]
        )
    )

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      color=Dict("ranges" =>Dict("green" =>[0,4],"yellow" =>[4,7],"red" =>[7,10])),
      showCurrentValue=true,
      value=10
    )

    run_server(app, "0.0.0.0", debug=true)

100%

### Color Gradient

Set a color gradient with:

    color=Dict(
        "gradient" => true,
        "ranges" => Dict(
            "<color>" => [<value>, <value>],
            "<color>" => [<value>, <value>],
            "<color>" => [<value>, <value>]
        )
    )

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_graduatedbar(
      color=("gradient" =>true,"ranges" =>("green" =>[0,4],"yellow" =>[4,7],"red" =>[7,10])),
      showCurrentValue=true,
      value=10
    )

    run_server(app, "0.0.0.0", debug=true)

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` (String; optional): The ID used to identify this compnent in Dash callbacks.

`value` (Real; optional): The value of the graduated bar.

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

`color` is a String | Dict with keys:

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

- `gradient` (Bool; 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` (Dict; 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 Dict with keys:

  - `color` (Array of Reals; optional)

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

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

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

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

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

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

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

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

`label` is a String | Dict with keys:

- `label` (String; optional)

- `style` (Dict; optional)

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

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

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