Chart.js #5938 test02

by Akihiko Kusanagi

HTML

<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<div style="overflow:hidden;">
<canvas id="chart1" width=150 height=400 style="float: left"></canvas>
<canvas id="chart2" width=150 height=400 style="float: left"></canvas>
<canvas id="chart3" width=150 height=400 style="float: left"></canvas>
<canvas id="chart4" width=150 height=400 style="float: left"></canvas>
<canvas id="chart5" width=150 height=400 style="float: left"></canvas>
<canvas id="chart6" width=150 height=400 style="float: left"></canvas>
</div>
<div style="overflow:hidden;">
<canvas id="chart7" width=270 height=270 style="float: left"></canvas>
</div>

JavaScript

new Chart(document.getElementById('chart1'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [-0.3, 4.6]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'a. maxTicksLimit: -'
    },
    scales: {
      xAxes: [{
        display: false
      }]
    }
{
	id: 'events',
	type: 'category',
	labels: Array.from([...new Set(this.state.eventLabelArray)]),
	scaleLabel: {
		display: true,
		labelString: 'Phenology'
	},
	ticks: {
		autoSkip: true
	}
}
	}
});
new Chart(document.getElementById('chart2'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [-0.5, 1.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'b. maxTicksLimit: -'
    },
    scales: {
      xAxes: [{
        display: false
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [0.5, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'c. maxTicksLimit: 11'
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 11
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart4'), {
  type: 'bar',
  data: {
    labels: [0, 1],
    datasets: [{
      data: [0.5, 2.5]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'd. stepSize: 0.01, maxTicksLimit: 11'
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        ticks: {
          stepSize: 0.01,
          maxTicksLimit: 11
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart5'), {
  type: 'bar',
  data: {
    labels: [0, 1],
   ...