Options - styling charts

Victor Perrier



Add a title to your chart with bb_title or bb_labs (bb_labs is a shortcut to set title and axis labels at the same time, but with no options for placement) :


You can specify a new color palette with function bb_color :

##   annee prod_therm prod_hydraulique prod_bioenergies prod_eolien
## 1  2012       48.1             63.8              5.8        14.9
## 2  2013       43.6             75.5              7.1        15.9
## 3  2014       25.9             68.1              7.5        17.1
## 4  2015       34.4             59.1              8.0        21.1
## 5  2016       45.9             63.9              8.5        20.7
##   prod_solaire
## 1          4.1
## 2          4.7
## 3          5.9
## 4          7.4
## 5          8.3

Or you can specify each color associated with data with bb_colors_manual :

Note : be careful when using named colors, CSS don’t recognize color variant such as royalblue2, firebrick3, … Use HEX code instead.

For bar charts, you can highlight a value in a simple barchart with :


Add a label to an axis :

You can format values on an axis with JavaScript (use htmlwidgets::JS to mark your character string as literal JavaScript) :

If you just want to add a suffix or prefix to the value, use the functions with the same name :

You can apply a format to x axis as well (especially useful with time), and fit = FALSE to don’t show all ticks :

Set a minimum on an axis (and look at the difference between above x-axis and below, without fit = FALSE) :


By default, legend is shown, you can hide it with bb_lengend

You can change the name appearing in the legend with bb_data, by giving an alias to the variable in the data. Here we have a column named cos in our data.frame, we renamed it Cosine.

Legend can be postionned with argument position, three values are possible : "bottom" (the default), "right" and "inset". For the last one, you must specify in which area of the chart the legend must be placed.


You can add grids to a chart with bb_x_axis and bb_y_axis :

This option also allows you to add vertical and horizontal lines :


You can show the tooltip separately for each serie in the chart :

You can change the format of the tooltip with a JavaScript function, for example d3.format. Write the function as a character vector, and use htmlwidgets::JS to mark it as literal JavaScript code.


All options combined :