Chart.js #3747 test 01

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 (stacked) </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',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-11-22',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-11-23',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-11-29',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-01',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-02',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-03',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-04',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-05',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-08',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-09',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-12',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-14',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-15',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}, {
  label: '2016-12-16',
  negative: rsf(),
  neutral: rsf(),
  positive: rsf()
}]

const renderChart = (id) => {
  const ctx = document.getElementById(id).getContext('2d')
  const unit = id // day, week, month
  console.log('ctx', ctx)
  const data = {
    labels: fakeData.map(({
      label
    }) => label),
    datasets: [{
      type: 'bar',
      label: 'Negative',
      backgroundColor: '#fa5151',
      data: fakeData.map(({
        negative
      }) => negative),
    }, {
      type: 'bar',
      label: 'Neutral',
      backgroundColor: '#f8cc54',
      data: fakeData.map(({
        neutral
      }) => neutral),
    }, {
      type: 'bar',
      label: 'Positive',
     ...