'data-ui Sparklines' — dui_sparkline • dataui

Create interactive 'sparklines' visualizations for use as a standalone component or in combination with 'reactable' or other table libraries. There are a wide variety of components for use with dui_sparkline, including lines, bars, points, reference lines, and labels. These 'sparklines' automatically include responsive and tooltip behaviors.

dui_sparkline(
  data = NULL,
  className = NULL,
  margin = NULL,
  max = NULL,
  min = NULL,
  onMouseMove = NULL,
  onMouseLeave = NULL,
  renderTooltip = NULL,
  preserveAspectRatio = NULL,
  valueAccessor = NULL,
  viewBox = NULL,
  ariaLabel = NULL,
  components = list(),
  responsive = TRUE,
  width = "100%",
  height = 100,
  elementId = NULL
)

Arguments

data	`vector`, `list`, `data.frame` of data that will be passed down to the component series.
className	`character` 'css' class name to be added to the 'sparkline'.
margin	`list` of the form `list(top =, right =, bottom =, left=)` that will specify the margins for the 'sparkline' chart.
max, min	`numeric` value that will be the maximum/minimum for the 'y' axis/scale. This is useful if you have multiple 'sparklines' that you want to all use the same scale.
onMouseMove, onMouseLeave	`htmlwidgets::JS` function to run on mouse events. These are automatically assigned with 'sparkline' `htmlwidgets` so it is unlikely that you will want to override the default `NULL`.
renderTooltip	`htmlwidget::JS` function that will provide the 'React' element to render when a user moves their mouse over the visualization. The function should follow the signature `({ event, data, datum, color }) =>`. If the function returns a `falsy` value then nothing will be rendered.
preserveAspectRatio	`character` to specify this attribute on the `svg` chart container. See preserveAspectRatio.
valueAccessor	`htmlwidgets::JS` function to let the chart know where to look for the `y` value in the `data`. An example would look like `(d) => d.yval` where `yval` is the property containing the value.
viewBox	`character` to specify this attribute on the `svg`. See viewBox.
ariaLabel	`character` label for accessibility for screen readers
components	`list` of children (series or reference lines) to include in the sparkline. Multiple components should be wrapped in `list` such as `components = list(dui_sparklineseries, dui_sparkbarseries())`. `dui_tooltip` component should also contain a similar list in effect forming a tree.
responsive	`logical` with default as `TRUE`. This argument is not passed on to the `React` component as a `prop`. Rather it is used in the `R` constructor to choose our `SparklineResponsive` component (`TRUE`) or `SparklineWithTooltip` (`FALSE`) component. Since `height` can be unstable and finicky, we only make `width` responsive.
width, height	`numeric` valid 'css' size unit. For `height`, this should always be `numeric`, but `width` might be something like `'100%'` or `'50vw'`.
elementId	`character` valid 'css' identifier for the `htmlwidget` container.

Value

react htmlwidget