Bar Chart

A barplot shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value. Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.


Example Color Themes

Example Fonts



Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Award" : ["New York Film Critics Circle Awards","Academy Awards","Bafta","Golden Globe Awards","Tony Awards","Academy Awards","Bafta","Golden Globe Awards","New York Film Critics Circle Awards","Bafta","Golden Globe Awards","New York Film Critics Circle Awards","Golden Globe Awards","New York Film Critics Circle Awards","Academy Awards","Bafta","Golden Globe Awards","Academy Awards","Golden Globe Awards","Golden Globe Awards","New York Film Critics Circle Awards","Bafta","Golden Globe Awards","Academy Awards","Golden Globe Awards","Golden Globe Awards","New York Film Critics Circle Awards","Tony Awards","Golden Globe Awards","Academy Awards","Emmy Awards","Screen Actors Guild Awards","Grammy Awards"],
        "Result" : ["Awarded","Awarded","Awarded","Awarded","Awarded","Nominated","Nominated","Awarded","Nominated","Nominated","Nominated","Nominated","Nominated","Awarded","Nominated","Awarded","Nominated","Nominated","Nominated","Nominated","Nominated","Awarded","Nominated","Nominated","Nominated","Nominated","Nominated","Awarded","Awarded","Nominated","Awarded","Awarded","Awarded"],
        "Work" : ["Roman Holiday","Roman Holiday","Roman Holiday","Roman Holiday","Ondine","Sabrina","Sabrina","Henrietta Award for World Film Favorite","Sabrina","War and Peace","War and Peace","Love in the Afternoon","Love in the Afternoon","The Nun's Story","The Nun's Story","The Nun's Story","The Nun's Story","Breakfast at Tiffany's","Breakfast at Tiffany's","Charade","My Fair Lady","Charade","My Fair Lady","Wait Until Dark","Two for the Road","Wait Until Dark","Wait Until Dark","Special Tony Award","Cecil B. DeMille Award","Jean Hersholt Humanitarian Award","Gardens of the World with Audrey Hepburn","Life Achievement Award","Audrey Hepburn's Enchanted Tales"]
     },
     "y" : {
        "data" : [
          [1953,1954,1954,1954,1954,1955,1955,1955,1955,1957,1957,1957,1958,1959,1960,1960,1960,1962,1962,1964,1964,1965,1965,1968,1968,1968,1968,1968,1990,1993,1993,1993,1994]
        ],
        "smps" : ["R1","R2","R3","R4","R5","R6","R7","R8","R9","R10","R11","R12","R13","R14","R15","R16","R17","R18","R19","R20","R21","R22","R23","R24","R25","R26","R27","R28","R29","R30","R31","R32","R33"],
        "vars" : ["Year"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"Result",
     "colorScheme":"Greens",
     "graphType":"Bar",
     "groupingFactors":[
        "Award"
     ],
     "legendColumns":"2",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "legendPosition":"top",
     "legendTextScaleFontFactor":"2",
     "maxSmpStringLen":"50",
     "objectBorderColor":"rgb(0,0,0)",
     "showLegendTitle":"false",
     "smpLabelScaleFontFactor":"2",
     "stackBy":"Result",
     "summaryType":"count",
     "title":"The Awards of Audrey Hepburn",
     "xAxis2Show":"true",
     "xAxisShow":"false"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-audrey2-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-audrey2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  colorBy="Result",
  colorScheme="Greens",
  graphType="Bar",
  groupingFactors=list("Award"),
  legendColumns=2,
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  legendPosition="top",
  legendTextScaleFontFactor=2,
  maxSmpStringLen=50,
  objectBorderColor="rgb(0,0,0)",
  showLegendTitle=FALSE,
  smpLabelScaleFontFactor=2,
  stackBy="Result",
  summaryType="count",
  title="The Awards of Audrey Hepburn",
  xAxis2Show=TRUE,
  xAxisShow=FALSE
)