Chart.js #5841 test01

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart1" width=500 height=250></canvas>
<canvas id="chart2" width=500 height=250></canvas>
<canvas id="chart3" width=500 height=250></canvas>
<canvas id="chart4" width=500 height=250></canvas>
<canvas id="chart5" width=500 height=250></canvas>
<canvas id="chart6" width=500 height=250></canvas>

JavaScript

function create(id, opts) {
  var ctx = document.getElementById(id).getContext('2d');
  return new Chart(ctx, {
    type: opts.type,
    data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [{
        data: opts.type === 'polarArea' ?
          [1, 2, 5, 10, 20] : [1, 5, 10, 50, 100],
        backgroundColor: [
          "rgba(255, 99, 132, 0.8)",
          "rgba(54, 162, 235, 0.8)",
          "rgba(255, 206, 86, 0.8)",
          "rgba(75, 192, 192, 0.8)",
          "rgba(153, 102, 255, 0.8)"
        ],
        borderWidth: 10,
        hoverBorderWidth: 20,
        borderColor: opts.borderColor || [
          "rgb(255, 99, 132)",
          "rgb(54, 162, 235)",
          "rgb(255, 206, 86)",
          "rgb(75, 192, 192)",
          "rgb(153, 102, 255)"
        ],
        borderAlign: opts.borderAlign
      }, {
        data: opts.type === 'polarArea' ?
          [1, 2, 5, 10, 20] : [1, 5, 10, 50, 100],
        backgroundColor: [
          "rgba(255, 129, 162, 0.8)",
          "rgba(54, 192, 255, 0.8)",
          "rgba(255, 236, 116, 0.8)",
          "rgba(75, 222, 222, 0.8)",
          "rgba(153, 132, 255, 0.8)"
        ],
        borderWidth: 10,
        hoverBorderWidth: 20,
        borderColor: opts.borderColor || [
          "rgb(255, 129, 162)",
          "rgb(54, 192, 255)",
          "rgb(255, 236, 116)",
          "rgb(75, 222, 222)",
          "rgb(153, 132, 255)"
        ],
        borderAlign: opts.borderAlign
      }]
    },
    options: {
      legend: false,
      title: {
        display: 'true',
        text: opts.title
      },
      responsive: false
    }
  });
}

create('chart1', {
  type: 'pie',
  title: 'v2.7.3'
});

create('chart2', {
  type: 'pie',
  title: 'v2.7.3',
  borderColor: 'rgb(204, 204, 204)'
});

create('chart3', {
  type: 'doughnut',
  title: 'v2.7.3'
});

create('chart4', {
  type: 'doughnut',
  title: 'v2.7.3',
  borderColor: 'rgb(204, 204, 204)'
});

create('chart5', {
  type: 'polarArea',
  title:...