title: how to show only each 15th x-labels in line chart chart.js in angular 6?
body: <p>i have a line chart of chart js and it's like this: </p>
  
  <pre><code>this.canvas = document.getElementById('myChart');
  this.ctx = this.canvas.getContext('2d');
  let myChart = new Chart(this.ctx, {
    type: 'line',
    data: {
      labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",],
      datasets: [
        {
          label: '',
          fill: false,
          lineTension: 0.1,
          backgroundColor: "steelblue",
          borderColor: "steelblue",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: "steelblue",
          pointBackgroundColor: "steelblue",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "steelblue",
          pointHoverBorderColor: "steelblue",
          pointHoverBorderWidth: 2,
          pointRadius: 2,
          pointHitRadius: 10,
          data: [40, 59, 46, 50, 56, 52, 40, 58, 29, 46, 36, 36, 45, 31, 19, 24, 26, 12, 30, 32, 31, 42, 37, 50, 34, 39, 28, 26, 33, 21],
        }
      ]
    },
    options: {
      responsive: false,
      scales: {
        xAxes: [{
          gridLines: {
            display: false
          }
        }],
      },
    }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>when I run it, it shows all the labels on x-axes. but I want to show only label <code>1, 15, 30</code>! I used to set other labels to <code>""</code> but in this way, the tooltip doesn't show the x-axis data! what should I do now? and I have another problem that is the label top of the chart. I set legends: {display: false} in options but the table won't be shown anymore</p>