Chart.js #3747 test 02

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<h1> ChartJS - Bar Chart </h1>

<div class="canvas-container">
  <div style="width: 75%">
    <h2> scales.xAxes[0].type = 'time'</h2>
    <h2> scales.xAxes[0].unit = 'day' </h2>
    <canvas id="day"></canvas>
  </div>
  <div style="width: 75%">
    <h2> scales.xAxes[0].type = 'time'</h2>
    <h2> scales.xAxes[0].unit = 'week' </h2>
    <canvas id="week"></canvas>
  </div>
  <div style="width: 75%">
    <h2> scales.xAxes[0].type = 'time'</h2>
    <h2> scales.xAxes[0].unit = 'month' </h2>
    <canvas id="month"></canvas>
  </div>
</div>

CSS

.canvas-container {}

JavaScript

const FACTOR = 100
const randomScalingFactor = () => (Math.round(Math.random() * FACTOR))
const rsf = randomScalingFactor

const fakeData = [
{ label: '2016-11-21', value: rsf() },
{ label: '2016-11-22', value: rsf() },
{ label: '2016-11-23', value: rsf() },
{ label: '2016-11-29', value: rsf() },
{ label: '2016-12-01', value: rsf() },
{ label: '2016-12-02', value: rsf() },
{ label: '2016-12-03', value: rsf() },
{ label: '2016-12-04', value: rsf() },
{ label: '2016-12-05', value: rsf() },
{ label: '2016-12-08', value: rsf() },
{ label: '2016-12-09', value: rsf() },
{ label: '2016-12-12', value: rsf() },
{ label: '2016-12-14', value: rsf() },
{ label: '2016-12-15', value: rsf() },
{ label: '2016-12-16', value: rsf() }]

const renderChart = (id) => {
  const ctx = document.getElementById(id).getContext('2d')
  const unit = id // day, week, month

  const data = {
    labels: fakeData.map(({label}) => label),
    datasets: [{
      type: 'bar',
      label: 'Value',
      backgroundColor: '#f8cc54',
      data: fakeData.map(({value}) => value),
    }, ]
  }

  const options = {
    title: {
      text: 'My Bar Chart',
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        type: 'time',
        time: {
          unit,
          min: fakeData[0].label,
          max: fakeData[fakeData.length - 1].label,
          displayFormats: {
            day: 'MM/DD/YY',
          },
        },
      }],
      yAxes: [{
        stacked: true,
      }],
    },
  }

  new window.Chart(ctx, {
    data,
    options,
    type: 'bar',
  })
}

renderChart('day')
renderChart('week')
renderChart('month')