Histogram Chart

A histogram takes as input a numeric variable only. The variable is cut into several bins, and the number of observation per bin is represented by the height of the bar. It is possible to represent the distribution of several variable on the same axis using this technique.


Example Color Themes

Example Fonts



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" : [
            [6.47,4.03],
            [6.13,3.76],
            [6.19,3.77],
            [4.89,3.34],
            [5.63,3.47],
            [4.52,2.92],
            [5.89,3.2],
            [4.79,2.71],
            [3.53,3.53],
            [6.08,4.51],
            [4.02,4.56]
          ],
          "smps" : ["Alcohol","Tobacco"],
          "vars" : ["North","Yorkshire","Northeast","East Midlands","West Midlands","East Anglia","Southeast","Southwest","Wales","Scotland","Northern Ireland"]
       }
    }
    
    
    // Create the configuration for the graph
    var config = {
       "citation":"Moore, David S., and George P. McCabe (1989). Introduction to the Practice of Statistics, p. 179.",
       "graphType":"Scatter2D",
       "histogramBins":"5",
       "histogramType":"stacked",
       "showHistogram":true,
       "theme":"CanvasXpress",
       "title":"Average weekly household spending, in British pounds, on tobacco products\\nand alcoholic beverages for each of the 11 regions of Great Britain.",
       "xAxisTitle":"Pounds Spent",
       "yAxisTitle":"Frequency"
    }
    

    // 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-alcoholtobaccot-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  citation="Moore, David S., and George P. McCabe (1989). Introduction to the Practice of Statistics, p. 179.",
  graphType="Scatter2D",
  histogramBins=5,
  histogramType="stacked",
  showHistogram=TRUE,
  theme="CanvasXpress",
  title="Average weekly household spending, in British pounds, on tobacco products\nand alcoholic beverages for each of the 11 regions of Great Britain.",
  xAxisTitle="Pounds Spent",
  yAxisTitle="Frequency"
)