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.

  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



vector, list, data.frame of data that will be passed down to the component series.


character 'css' class name to be added to the 'sparkline'.


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.


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.


character to specify this attribute on the svg chart container. See preserveAspectRatio.


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.


character to specify this attribute on the svg. See viewBox.


character label for accessibility for screen readers


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.


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


character valid 'css' identifier for the htmlwidget container.


react htmlwidget