Chart.js #5816 test02

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@chartjs/Chart.5816.js"></script>
<div style="width: 489px">
  <canvas id="myChart1"></canvas>
</div>
<div style="width: 489px">
  <canvas id="myChart2"></canvas>
</div>

JavaScript

var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7],
    datasets: ['A','B','C','D','E','F','G'].map(function(label) {
      return {
        label: label,
        data: [1,2,3,4,5,6,7].map(Math.random),
        fill: false
      };
    })
  },
  options: {
    title: {
      display: true,
      text: 'padding: 0' 
    },
    layout: {
      padding: 0
    },
    legend: {
      position: 'top'
    },
    aspectRatio: 1.5
  }
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7],
    datasets: ['A','B','C','D','E','F','G'].map(function(label) {
      return {
        label: label,
        data: [1,2,3,4,5,6,7].map(Math.random),
        fill: false
      };
    })
  },
  options: {
    title: {
      display: true,
      text: 'padding: 0' 
    },
    layout: {
      padding: 0
    },
    legend: {
      position: 'left'
    },
    aspectRatio: 1.5
  }
});

var n = 0;
setInterval(function() {
  ++n;

  chart1.options.title.text = 'padding: ' + n;
  chart1.options.layout.padding = n;
  chart1.update(0);

  chart2.options.title.text = 'padding: ' + n;
  chart2.options.layout.padding = n;
  chart2.update(0);

  ctx1.save();
  ctx1.lineWidth = 0.5
  ctx1.strokeStyle = 'blue';
  ctx1.strokeRect(chart1.legend.left, chart1.legend.top, chart1.legend.width, chart1.legend.height);
  ctx1.strokeStyle = 'red';
  chart1.legend.legendHitBoxes.forEach(function(box) {
    ctx1.strokeRect(box.left, box.top, box.width, box.height);
  });
  ctx1.restore();

  ctx2.save();
  ctx2.lineWidth = 0.5
  ctx2.strokeStyle = 'blue';
  ctx2.strokeRect(chart2.legend.left, chart2.legend.top, chart2.legend.width, chart2.legend.height);
  ctx2.strokeStyle = 'red';
  chart2.legend.legendHitBoxes.forEach(function(box) {
    ctx2.strokeRect(box.left, box.top, box.width, box.height);
  });
 ...