Chart.js #fallback 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"></canvas>
<canvas id="chart2"></canvas>

JavaScript

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3],
    datasets: [{
      data: [{x:0,y:0}, {x:1,y:1}, {x:2,y:2}, {x:3,y:3}],
      fill: false,
      pointStyle: 'circle',
      backgroundColor: 'red',
      borderColor: 'black',
      borderWidth: 3,
    }]
  },
  "options": {
    /*"elements": {
      "point": {
        "rotation": [-180, -157.5, -135, -112.5, -90, -67.5, -45, -22.5, 0, 22.5, 45, 67.5, 90, 112.5, 135, 157.5, 180],
        "backgroundColor": gradient,
        "borderColor": "#cccccc"
      },
      "line": {
        fill: false
      }
    },*/
    "layout": {
      "padding": 20
    }
  }
});

var ctx2 = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3],
    datasets: [{
      data: [{x:0,y:0}, {x:1,y:1}, {x:2,y:2}, {x:3,y:3}],
      fill: false,
      pointStyle: 'circle',
      backgroundColor: 'red',
      borderColor: 'black',
      borderWidth: 3,
    }]
  },
  "options": {
    /*"elements": {
      "point": {
        "rotation": [-180, -157.5, -135, -112.5, -90, -67.5, -45, -22.5, 0, 22.5, 45, 67.5, 90, 112.5, 135, 157.5, 180],
        "backgroundColor": gradient,
        "borderColor": "#cccccc"
      },
      "line": {
        fill: false
      }
    },*/
    "layout": {
      "padding": 20
    }
  }
});