angularplotlyhistogramplotly.jsdate-histogram

Horizontal histogram chart - show date on horizontal axis

I found the following Plotly chart on CodePen

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-3.0.1.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

In the JS section, I have:

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 = {
  y: x1,
  type: "histogram",
  // opacity: 0.5,
  marker: {
     color: 'blue',
  },
};
var trace2 = {
  y: x2,
  type: "histogram",
  // opacity: 0.3,
  marker: {
     color: 'grey',
  },
};

var data = [trace1, trace2];
var layout = {barmode: "overlay"};
Plotly.newPlot('myDiv', data, layout);

It produces following output:

enter image description here

I want this histogram horizontally, plus I want date against values for each trace. Also, I don't want to show the 0, 1.2, 1.4 on the side axis, instead date vs value.

Date        Value trace 1  Value trace 2 
2010-01-01  10             15   
2012-01-01  12             20 
2014-01-01  14             22

Is this possible?

Solution

  • We can use histfunc to specify the aggregation type it can be "count" | "sum" | "avg" | "min" | "max".

    {
  histfunc: "sum", // "count" | "sum" | "avg" | "min" | "max"
  y: x,
  x: y,
  type: "histogram",
  name: "trace1",
  orientation: "h"
}

    Then ensure you specify the yaxis type to be category.

    const layout = {
  font: { size: 18 },
  title: 'Histogram with Date Axis',
  yaxis: {
    type: 'category',
  },
  margin: {
    l: 150,
  } 
};


    //Begin script
// Generate raw data
const x = ["2023-01-01",
  "2023-01-15",
  "2023-02-01",
  "2023-02-15",
  "2023-03-01"
];
const y = ["5",
  "10",
  "3",
  "10",
  "5"
];
const y2 = ["15",
  "5",
  "7",
  "15",
  "22"
];

const data = [{
    histfunc: "sum", // "count" | "sum" | "avg" | "min" | "max"
    y: x,
    x: y,
    type: "histogram",
    name: "trace1",
    orientation: "h"
  }

  ,
  {
    histfunc: "sum",
    y: x,
    x: y2,
    name: "trace2",
    type: "histogram",
    orientation: "h",
  }

];

const layout = {
  font: {
    size: 18
  }

  ,
  title: 'Histogram with Date Axis',
  yaxis: {
    type: 'category',
  }

  ,
  margin: {
    l: 150,
  }
}

;

// make the chart change size with window resize
const config = {
  responsive: true
}

;
Plotly.newPlot("myDiv", data, layout, config); // add config const
// End script
    #myDiv {
  text-align: center;
  max-width: 800px;
}
    <head>
  <!-- Load plotly.js into the DOM -->
  <script src='https://cdn.plot.ly/plotly-3.0.1.min.js'></script>
</head>

<body style="display: flex;justify-content: center;">
  <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>