Bar Charts

Makes a vertical bar plot.

A bar plot presents categorical data with rectangular bars with lengths proportional to the values that they represent.

Examples

The bar plot is exposed by the .plot() function called on a Series or DataFrame. The .plot() method accepts an HTML Div id where it renders the plot, while configuration options for the bars drawn can be passed through the config parameter.

Bar plot on Series

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--danfojs CDN -->
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<script>
s = new dfd.Series([1, 3, 2, 6, 10, 34, 40, 51, 90, 75])
s.plot("plot_div").bar()
</script>
</body>
</html>

Bar plot on DataFrame

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--danfojs CDN -->
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<script>
df = new dfd.DataFrame({'pig': [20, 18, 489, 675, 1776],
'horse': [4, 25, 281, 600, 1900]}, {index: [1990, 1997, 2003, 2009, 2014]})
df.plot("plot_div").bar()
</script>
</body>
</html>

Configuring your plots

danfo.js plotting uses Plotly.js as its backend for plotting. This means you have all the configuration, flexibility and interactiveness of Plotly.

All customization on the plot can be passed as an object of key-value pairs to the config parameter. For example:

var layout = {
title: 'A sample plot',
xaxis: {
title: 'X',
},
yaxis: {
title: 'Y',
}
}
df.plot("div_tag").bar({layout: layout})

For more configuration options for bar plots, see the Plotly style doc.