Chart.js #5961 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<canvas id="chart1" width=420 height=160></canvas>
<canvas id="chart2" width=320 height=160></canvas>
<canvas id="chart3" width=300 height=300></canvas>

JavaScript

new Chart(document.getElementById('chart1'), {
  type: "line",
  data: {
    labels: [
      '111111111111111111', 
      '222222222222222222', 
      '333333333333333333', 
      '444444444444444444', 
    ],
    datasets: [{
      data: [0, 10, 5, 2]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    title: {
      display: true,
      text: 'Tick label overlap'
    },
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90
        }
      }]
    }
  }
});
new Chart(document.getElementById('chart2'), {
  type: "bar",
  data: {
    labels: [
      "0k-40k",
      "40k-80k",
      "80k-100k",
      "100k-120k",
      "120k-160k",
      "160k-180k",
      "180k-220k"
    ],
    datasets: [{
      label: "My First dataset",
      backgroundColor: "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          fontSize: 16,
          fontStyle: "bold",
          precision: 2,
          suggestedMin: 0
        },
        scaleLabel: {
          display: true,
          fontSize: 16,
          fontStyle: "bold",
          labelString: "Chart Label X",
        }
      }],
      yAxes: [{
        ticks: {
          fontSize: 16,
          fontStyle: "bold",
          precision: 2,
          suggestedMin: 0
        },
        scaleLabel: {
          display: true,
          fontSize: 16,
          fontStyle: "bold",
          labelString: "Chart Label Y",
          }
      }]
    }
  }
});
new Chart(document.getElementById('chart3'), {
  type: 'bar',
  data: {
    labels: ['sdfsd sdfsadfasdfasfda', 'Poljfgkjhclj flcficysdf', 'dgasgsdf'],
    datasets: [
      {         
        label: "test",
        backgroundColor: ["#3e95cd", "#3e95cd","#3e95cd"],
        data: [400, 550, 560]
...