Chart.js #5841 test02

by Akihiko Kusanagi

HTML

<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<div>
  <canvas id="chart1" width=250 height=250 style="display: inline-block"></canvas>
  <canvas id="chart7" width=250 height=250 style="display: inline-block"></canvas>
</div>
<div>
  <canvas id="chart2" width=250 height=250 style="display: inline-block"></canvas>
  <canvas id="chart8" width=250 height=250 style="display: inline-block"></canvas>
</div>
<div>
  <canvas id="chart3" width=250 height=250 style="display: inline-block"></canvas>
  <canvas id="chart9" width=250 height=250 style="display: inline-block"></canvas>
</div>
<div>
  <canvas id="chart4" width=250 height=250 style="display: inline-block"></canvas>
  <canvas id="chart10" width=250 height=250 style="display: inline-block"></canvas>
</div>
<div>
  <canvas id="chart5" width=250 height=250 style="display: inline-block"></canvas>
  <canvas id="chart11" width=250 height=250 style="display: inline-block"></canvas>
</div>
<div>
  <canvas id="chart6" width=250 height=250 style="display: inline-block"></canvas>
  <canvas id="chart12" width=250 height=250 style="display: inline-block"></canvas>
</div>

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, 0.01],
        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: 'borderAlign: \'center\''
});

create('chart2', {
  type: 'pie',
  title: 'borderAlign: \'center\'',
  borderColor: 'rgb(204, 204, 204)'
});

create('chart3', {
  type: 'doughnut',
  title: 'borderAlign: \'center\''
});

create('chart4', {
  type: 'doughnut',
  title: 'borderAlign: \'center\'',
  borderColor: 'rgb(204, 204,...