multiBarChart {Rnvd3}

Multibar chart

Description

HTMLwidget displaying a multibar chart.

Usage

multiBarChart(
  data,
  formula,
  by,
  palette = "viridis",
  xAxisTitle = NULL,
  yAxisTitle = NULL,
  margins = list(b = 100, l = 70),
  duration = 1300,
  rotateLabels = 0,
  groupSpacing = 0.1,
  xAxisTitleDistance = 35,
  yAxisTitleDistance = -5,
  yAxisShowMaxMin = FALSE,
  yAxisTickFormat = ".0f",
  xLabelsFontSize = "1rem",
  yLabelsFontSize = "1rem",
  rightAlignYaxis = FALSE,
  reduceXticks = FALSE,
  staggerLabels = FALSE,
  wrapLabels = FALSE,
  useInteractiveGuideline = FALSE,
  tooltipFormatters = list(value = NULL, header = NULL, key = NULL),
  tooltipTransitions = TRUE,
  tooltipShadow = TRUE,
  radioButtonMode = FALSE,
  legendTitle = NULL,
  legendHjust = -20,
  width = "100%",
  height = NULL,
  elementId = NULL
)

Arguments

data

dataframe used for the chart

formula

a two-sided formula like y ~ x, where "x" and "y" are two column names of data

by

string, the "by" variable; must be a column name of data

palette

this can be either the name of a viridis color palette, e.g. "viridis", "cividis" or "turbo" (see viridis), or a vector of colors, or a function that takes an integer argument (the required number of colors) and returns a character vector of colors (e.g. you can use colorRampPalette)

xAxisTitle

a title for the x-axis; if NULL, the title is taken from the formula argument

yAxisTitle

a title for the y-axis; if NULL, the title is taken from the formula argument

margins

a named list defining the margins, with names "t", "r", "b" and "l", for "top", "right", "bottom" and "left" respectively; you can specify only certain margins in the list to change just those parts

duration

duration of the transition, a number of milliseconds

rotateLabels

a number, the angle of rotation of the labels of the x-axis (in degrees)

groupSpacing

a number, controls the distance between groups of bars

xAxisTitleDistance

a number, controls the distance between the x-axis and its title

yAxisTitleDistance

a number, controls the distance between the y-axis and its title

yAxisShowMaxMin

Boolean, whether to show the min and the max on the y-axis

yAxisTickFormat

a d3 formatting string for the y-axis; see d3.format

xLabelsFontSize

a CSS measure, the font size of the labels on the x-axis

yLabelsFontSize

a CSS measure, the font size of the labels on the y-axis

rightAlignYaxis

Boolean, whether to put the y-axis on the right side instead of the left

reduceXticks

Boolean, whether to reduce the ticks on the x-axis so that the x-labels are less likely to overlap

staggerLabels

Boolean, whether to make the x-labels stagger at different distances from the axis so they're less likely to overlap

wrapLabels

Boolean, whether to split long x-labels by new lines in order to prevent overlapping

useInteractiveGuideline

Boolean, other kind of tooltips: sets the chart to use a guideline and floating tooltip instead of requiring the user to hover over specific hotspots

tooltipFormatters

formatters for the tooltip; each formatter must be NULL for the default formatting, otherwise a JavaScript function created with JS; there are three possible formatters (see the example):

value

formatter for the y-value displayed in the tooltip

header

formatter for the tooltip header (this is the x-value)

key

formatter for the value of the 'by' variable

tooltipTransitions

Boolean, whether to style the tooltip with a fade effect

tooltipShadow

Boolean, whether to style the tooltip with a shadow

radioButtonMode

Boolean, whether to authorize only one selection in the legend (i.e. only one level of the 'by' variable)

legendTitle

a title for the legend, or NULL for no title

legendHjust

horizontal adjustment of the legend title

width

width of the chart container, must be a valid CSS measure

height

height of the chart container, must be a valid CSS measure

elementId

an id for the chart container; commonly useless

Value

A htmlwidget displaying a grouped/stacked bar chart.

Note

In Shiny, you can style the axis titles with the help of CSS; see the shiny example. It is also possible outside of Shiny; see the second example below, where we set the CSS with the help of prependContent.

Examples

library(Rnvd3)
# in this example we use the tooltip formatters for styling only; we could
# achieve the same result with the help of CSS
dat <- reshape2::melt(
  apply(HairEyeColor, c(1, 2), sum), value.name = "Count"
)
multiBarChart(
  dat, Count ~ Eye, "Hair",
  tooltipFormatters = list(
    value = JS(
      "function(x){",
      "  return '<span style=\"color:red;\">' + x + '</span>';",
      "}"
    ),
    header = JS(
      "function(x){",
      "  return '<span style=\"color:green;\">' + x + '</span>';",
      "}"
    ),
    key = JS(
      "function(x){",
      "  return '<i style=\"color:blue;\">' + x + '</i>';",
      "}"
    )
  )
)

# style axis titles with CSS ####
library(htmltools)

CSS <- HTML(
  ".nvd3 .nv-axis.nv-x text.nv-axislabel,
   .nvd3 .nv-axis.nv-y text.nv-axislabel {
     font-size: 2rem;
     fill: red;
  }"
)

widget <- multiBarChart(
  dat, Count ~ Eye, "Hair", palette = "turbo"
)
prependContent(
  widget,
  tags$style(CSS)
)