Chart.js #5297

by Akihiko Kusanagi

HTML

<script src="https://www.chartjs.org/dist/master/Chart.min.js"></script>
<canvas id="myChart" height=600></canvas>

JavaScript

var maxSize = 0;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        data: Array.apply(null, Array(360)).map(function(v, i) {return i;}),
        borderWidth: 4,
        borderColor: "#1FA7B9",
        fill: false,
        lineTension: 0,
        // cubicInterpolationMode: 'default',
        radius: 0
        // backgroundColor: "#00C7B1"
      },
      {
        data: Array.apply(null, Array(360)).map(function(v, i) {return 360 - i;}),
        borderWidth: 4,
        borderColor: "#00C7B1",
        fill: false,
        lineTension: 0,
        // cubicInterpolationMode: 'default',
        radius: 0,
        // backgroundColor: "#1FA7B9"
      }
    ],
    // labels: this.props.xLabels
  },
  options: {
    elements: {
      line: {
        tension: 0
      },
      point: {
        radius: 0
      }
    },
    scales: {
      yAxes: [
        {
          scaleLabel: {
            display: true,
            labelString: 'Average Total Net Costs/Month'
          },
          gridLines: {
            // display: false
            // color: 'red',
            drawBorder: false,
            tickMarkLength: 15
            // zeroLineColor: 'grey'
          },
          ticks: {
            suggestedMin: 0,
            suggestedMax: maxSize,
            callback: function (value, index, labels) {
              return Number(value) / 1000 + 'K';
            }
          }
        }
      ],
      xAxes: [
        {
          type: 'category',
          scaleLabel: {
            display: true,
            labelString: 'Years at Residence'
          },
          gridLines: {
            // display: false
            drawBorder: false,
            tickMarkLength: 20
          },
          labels: Array.apply(null, Array(360)).map(function(v, i) {return i;}),
          ticks: {
            // suggestedMin: 0,
            // suggestedMax: 10,
            // autoSkip: false,
    ...