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

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


Show Code

Tools

<head>
  <!-- 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/dist/canvasXpress.min.js"></script>
</head>

<body>

  <!-- 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 = {
       "y" : {
          "data" : [
            [33,44,55]
          ],
          "smps" : ["S1","S2","S3"],
          "vars" : ["V1"]
       }
    }
    
    
    // Create the configuration for the graph
    var config = {
       "decorations":{
          "marker":[
             {
                "color":"red",
                "fontSize":14,
                "position":"top",
                "sample":"S1",
                "text":"p < 0.01 ***",
                "type":"annotation",
                "variable":"V1"
             },
             {
                "fontSize":14,
                "position":"top",
                "sample":"S2",
                "text":"p < 0.05 **",
                "type":"annotation",
                "variable":"V1"
             },
             {
                "color":"red",
                "fontSize":14,
                "fontStyle":"bold",
                "sample":"S2",
                "sample2":"S3",
                "text":"p < 0.01 ***",
                "type":"comparison",
                "variable":"V1",
                "variable2":"V1"
             }
          ]
       },
       "graphOrientation":"vertical",
       "graphType":"Bar",
       "showLegend":false,
       "smpTextRotate":"90",
       "smpTitle":"Samples",
       "theme":"CanvasXpress",
       "title":"Simple Bar graph with annotations",
       "xAxisTitle":"Value"
    }
    

    // Call the CanvasXpress function to create the graph
    var cX = new CanvasXpress("canvasId", data, config);


  </script>

</body>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-basic-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  decorations=list(marker=list(list(color="red", fontSize=14, position="top", sample="S1", text="p < 0.01 ***", type="annotation", variable="V1"), list(fontSize=14, position="top", sample="S2", text="p < 0.05 **", type="annotation", variable="V1"), list(color="red", fontSize=14, fontStyle="bold", sample="S2", sample2="S3", text="p < 0.01 ***", type="comparison", variable="V1", variable2="V1"))),
  graphOrientation="vertical",
  graphType="Bar",
  showLegend=FALSE,
  smpTextRotate=90,
  smpTitle="Samples",
  theme="CanvasXpress",
  title="Simple Bar graph with annotations",
  xAxisTitle="Value"
)