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()

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
)

Color Range

Set a color range with:

color = list(
    'ranges' = list(
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;)
    )
)

library(dashDaq)

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

Color Gradient

Set a color gradient with:

color = list(
    'gradient' = TRUE,
    'ranges' = list(
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;),
        '&lt;color&gt;' = list(&lt;value&gt;, &lt;value&gt;)
    )
)

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
)

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.