1

Am having a problem in Chart.js where the first label on my X-axis gets too close to the Y-axis, so I would like to skip the first data label so that the first label visible is 30. Additionally, my intervals generally skip in increments of 30, with the exception of the last interval on the x-axis which increases by 59. How do I fix this? I'm seeing weird labels (1,31,61...,301,360) and would like to see (30,60,90,...,330,360), and can't figure it out from the documentation.

I am also OK with hardcoding the x-axis labels to be ["",30,60,90,...360] as long as the underlying data for the other points remains there. 

var x_vals = [];
var y_vals = [];
for (var i = 1; i < 361; i++) {
  x_vals.push(i);
  y_vals.push(1000 - i);
}

var obj = {
  "chart_type": "line",
  "x_values": x_vals,
  "series_name": "whatever",
  "y_values": y_vals,
  "chart_title": "Something",
};
createSingleChartFromObj("chart1", obj);

// for a single-y-axis
function createSingleChartFromObj(canvasID, obj) {
  let myChart = document.getElementById(canvasID).getContext('2d'); //getContext is for canvas


  var massPopChart = new Chart(myChart, {
    type: obj['chart_type'],
    data: {
      labels: obj['x_values'],
      datasets: [{
        label: obj['series_name'],
        data: obj['y_values']
      }]
    },
    options: {
      title: {
        display: true,
        text: obj['chart_title'],
      },
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: obj['series_name']
          },
          ticks: {
            userCallback: function(value, index, values) {
              if (parseInt(value) < 1000) {
                return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
              } else {
                // https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis
                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              }
            }
          }
        }],
        xAxes: [{
          beginAtZero: false,
          display: true,
          gridLines: false,
          ticks: {
            autoSkip: true,
            maxTicksLimit: 12
          },
          color: 'black'
        }]
      },
      showLines: true
    }
  })
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col" id="graph1">
        <canvas width="100" height="100" id="chart1"></canvas>
      </div>
    </div>
  </div>
</body>

</html>

My code is in the JS Fiddle

kashmoney
  • 412
  • 1
  • 5
  • 17

1 Answers1

1

Having less data points clears up the issues quite a bit:

var x_vals = [];
var y_vals = [];
for (var i=0;i<=360;i++) {
    if ((i % 30) == true) {
        x_vals.push(i-1);
    y_vals.push(1000-i-1);
    }
}

It may be that ChartJS is trying to calculate too many points ...

neophytte
  • 648
  • 2
  • 11
  • 25
  • I don't want to get rid of the datapoints though, I just want to space out the label interval so that I have just 13 labels ("",30,60,90,120,150,180,210,240,270,300,330,360) while preserving the underlying data. – kashmoney Jan 25 '19 at 13:43