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)

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)

Color Range

Set a color range with:

color=Dict(
    "ranges" => Dict(
        "&lt;color&gt;" => [&lt;value&gt;, &lt;value&gt;],
        "&lt;color&gt;" => [&lt;value&gt;, &lt;value&gt;],
        "&lt;color&gt;" => [&lt;value&gt;, &lt;value&gt;]
    )
)

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)

Color Gradient

Set a color gradient with:

color=Dict(
    "gradient" => true,
    "ranges" => Dict(
        "&lt;color&gt;" => [&lt;value&gt;, &lt;value&gt;],
        "&lt;color&gt;" => [&lt;value&gt;, &lt;value&gt;],
        "&lt;color&gt;" => [&lt;value&gt;, &lt;value&gt;]
    )
)

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)

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.