plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Histograms in plotly.js

How to make a D3.js-based histogram in JavaScript. Seven examples of colored, horizontal, and normal histogram bar charts.

var x = [];
for (var i = 0; i < 500; i ++) {
	x[i] = Math.random();
}

var trace = {
    x: x,
    type: 'histogram',
  };
var data = [trace];
Plotly.newPlot('myDiv', data);
var y = [];
for (var i = 0; i < 500; i ++) {
	y[i] = Math.random();
}

var data = [
  {
    y: y,
    type: 'histogram',
	marker: {
    color: 'pink',
	},
  }
];
Plotly.newPlot('myDiv', data);
var x1 = [];
var x2 = [];
for (var i = 1; i < 500; i++)
{
	k = Math.random();
	x1.push(Math.random() + 1);
	x2.push(Math.random() + 1.1);
}
var trace1 = {
  x: x1,
  type: "histogram",
  opacity: 0.5,
  marker: {
     color: 'green',
  },
};
var trace2 = {
  x: x2,
  type: "histogram",
  opacity: 0.6,
  marker: {
     color: 'red',
  },
};

var data = [trace1, trace2];
var layout = {barmode: "overlay"};
Plotly.newPlot("myDiv", data, layout);
var x1 = [];
var x2 = [];
for (var i = 0; i < 500; i ++) {
	x1[i] = Math.random();
	x2[i] = Math.random();
}

var trace1 = {
  x: x1,
  type: "histogram",
};
var trace2 = {
  x: x2,
  type: "histogram",
};
var data = [trace1, trace2];
var layout = {barmode: "stack"};
Plotly.newPlot("myDiv", data, layout);
var x1 = [];
var x2 = [];
var y1 = [];
var y2 = [];
for (var i = 1; i < 500; i++) 
{
  k = Math.random();
  x1.push(k*5);
  x2.push(k*10);
  y1.push(k);
  y2.push(k*2);
}
var trace1 = {
  x: x1,
  y: y1,
  name: 'control',
  autobinx: false, 
  histnorm: "count", 
  marker: {
    color: "rgba(255, 100, 102, 0.7)", 
     line: {
      color:  "rgba(255, 100, 102, 1)", 
      width: 1
    }
  },  
  opacity: 0.5, 
  type: "histogram", 
  xbins: {
    end: 2.8, 
    size: 0.06, 
    start: .5
  }
};
var trace2 = {
  x: x2,
  y: y2, 
  autobinx: false, 
  marker: {
          color: "rgba(100, 200, 102, 0.7)",
           line: {
            color:  "rgba(100, 200, 102, 1)", 
            width: 1
    } 
       }, 
  name: "experimental", 
  opacity: 0.75, 
  type: "histogram", 
  xbins: { 
    end: 4, 
    size: 0.06, 
    start: -3.2

  }
};
var data = [trace1, trace2];
var layout = {
  bargap: 0.05, 
  bargroupgap: 0.2, 
  barmode: "overlay", 
  title: "Sampled Results", 
  xaxis: {title: "Value"}, 
  yaxis: {title: "Count"}
};
Plotly.newPlot('myDiv', data, layout);
var x = [];
for (var i = 0; i < 500; i ++) {
	x[i] = Math.random();
}

var trace = {
    x: x,
    type: 'histogram',
	cumulative: {enabled: true}
  };
var data = [trace];
Plotly.newPlot('myDiv', data);
var x = [];
for (var i = 0; i < 500; i ++) {
	x[i] = Math.random();
}

var data = [
  {
    x: x,
    type: 'histogram',
	histnorm: 'probability',
	marker: {
        color: 'rgb(255,255,100)',
     },
  }
];
Plotly.newPlot('myDiv', data);
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.