<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>
#myDiv {
margin: 0 auto;
border: 1px solid black;
height: 85vh;
min-height: 300px;
}
const data = [
{
"month_length" : 31,
"count" : 633,
"sale_month" : "2018-08-01T00:00:00"
},
{
"month_length" : 30,
"count" : 720,
"sale_month" : "2018-09-01T00:00:00"
},
{
"month_length" : 31,
"count" : 745,
"sale_month" : "2018-10-01T00:00:00"
},
{
"month_length" : 30,
"count" : 720,
"sale_month" : "2018-11-01T00:00:00"
},
{
"month_length" : 31,
"count" : 744,
"sale_month" : "2018-12-01T00:00:00"
},
{
"month_length" : 31,
"count" : 744,
"sale_month" : "2019-01-01T00:00:00"
},
{
"month_length" : 28,
"count" : 672,
"sale_month" : "2019-02-01T00:00:00"
},
{
"month_length" : 30,
"count" : 743,
"sale_month" : "2019-03-01T00:00:00"
},
{
"month_length" : 30,
"count" : 720,
"sale_month" : "2019-04-01T00:00:00"
},
{
"month_length" : 31,
"count" : 744,
"sale_month" : "2019-05-01T00:00:00"
},
{
"month_length" : 30,
"count" : 720,
"sale_month" : "2019-06-01T00:00:00"
},
{
"month_length" : 31,
"count" : 744,
"sale_month" : "2019-07-01T00:00:00"
},
{
"month_length" : 31,
"count" : 112,
"sale_month" : "2019-08-01T00:00:00"
}
]
const trace1 = {
type: 'bar',
x: data.map(d => new Date(d.sale_month)),
y: data.map(d => d.count),
marker: {
color: '#C8A2C8',
line: {
width: 1
}
}
};
const vis_data = [ trace1 ];
const layout = {
title: 'Sales per month',
font: {size: 18}
};
Plotly.newPlot('myDiv', vis_data, layout, {responsive: true});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.