<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 = [{'sale_day':'2016-12-05T00:00:00','avg_monthly_sales':61309.28571428571},{'sale_day':'2017-01-05T00:00:00','avg_monthly_sales':49340},{'sale_day':'2017-02-05T00:00:00','avg_monthly_sales':46434},{'sale_day':'2017-03-05T00:00:00','avg_monthly_sales':42822},{'sale_day':'2017-04-05T00:00:00','avg_monthly_sales':35902},{'sale_day':'2017-05-05T00:00:00','avg_monthly_sales':22849},{'sale_day':'2017-06-05T00:00:00','avg_monthly_sales':15289},{'sale_day':'2017-07-05T00:00:00','avg_monthly_sales':15402.999999999998},{'sale_day':'2017-08-05T00:00:00','avg_monthly_sales':20162},{'sale_day':'2017-09-05T00:00:00','avg_monthly_sales':13297},{'sale_day':'2017-10-05T00:00:00','avg_monthly_sales':13779},{'sale_day':'2017-11-05T00:00:00','avg_monthly_sales':8308},{'sale_day':'2017-12-05T00:00:00','avg_monthly_sales':10355},{'sale_day':'2018-01-05T00:00:00','avg_monthly_sales':9715},{'sale_day':'2018-02-05T00:00:00','avg_monthly_sales':16555},{'sale_day':'2018-03-05T00:00:00','avg_monthly_sales':15291},{'sale_day':'2018-04-05T00:00:00','avg_monthly_sales':19459},{'sale_day':'2018-05-05T00:00:00','avg_monthly_sales':34376},{'sale_day':'2018-06-05T00:00:00','avg_monthly_sales':39383},{'sale_day':'2018-07-05T00:00:00','avg_monthly_sales':37709},{'sale_day':'2018-08-05T00:00:00','avg_monthly_sales':35167},{'sale_day':'2018-09-05T00:00:00','avg_monthly_sales':29218},{'sale_day':'2018-10-05T00:00:00','avg_monthly_sales':27561},{'sale_day':'2018-11-05T00:00:00','avg_monthly_sales':45023},{'sale_day':'2018-12-05T00:00:00','avg_monthly_sales':58084},{'sale_day':'2019-01-05T00:00:00','avg_monthly_sales':69645},{'sale_day':'2019-02-05T00:00:00','avg_monthly_sales':70082},{'sale_day':'2019-03-05T00:00:00','avg_monthly_sales':67285},{'sale_day':'2019-04-05T00:00:00','avg_monthly_sales':55727},{'sale_day':'2019-05-05T00:00:00','avg_monthly_sales':50474},{'sale_day':'2019-06-05T00:00:00','avg_monthly_sales':48378},{'sale_day':'2019-07-05T00:00:00','avg_monthly_sales':51610}]

const trace1 = {
    type: 'bar',
    x: data.map(d => new Date(d.sale_day)),
    y: data.map(d => d.avg_monthly_sales),
    marker: {
        color: '#C8A2C8',
        line: {
            width: 1
        }
    }
};

const vis_data = [ trace1 ];

const layout = { 
  title: 'Average Monthly Sales',
  font: {size: 18}
};

Plotly.newPlot('myDiv', vis_data, layout, {responsive: true});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.