title: How have a lot of labels Data in chart.js
body: <p>I am using chart.js to create a linear Chart, my data would be loan amount that is either 180, payment that is for 15 years mortgage or 360 payment that is for  30 years. What I am sending to the chart is Loan amount for Data that is in vertical line, for the Horizontal line I have 3 Labels that is 0 – 15 Years – 30 Years- To show the chart correctly the labels should be 360 labels that I don’t want to show all, how I can manage it?</p>
  
  <pre><code>var lineChartData = {
      labels: ["0", "15 Years", "30 Years"],
      datasets: [
          {
              label: '# of Votes',
              fillColor: "",
              data: [0]
          }
      ]
  
  }
  
  
   function UpdateLineChart(data) {
      debugger;
      //Set data returned from Server
      lineChartData.datasets[0].fillColor = data.colorString;
      lineChartData.datasets[0].data = data.lineChartData;
      //Update the Pie Chart
      var canvasForLineChart = document.getElementById("canvasForLineChart");
      var context2DLine = canvasForLineChart.getContext("2d");
      new Chart(context2DLine).Line(lineChartData);
  }
  </code></pre>
  
  <p>The data in the Chart is coming from C# and is Array of 180 and data looks like:</p>
  
  <pre><code>    0: 200000
      1:199999
      2:198988
      .....
      179:180
      180:0
  </code></pre>
  
  <p>How I can have it work with the just 3 labels?</p>
  
  <p>when I have 3 labels my chart is look like this:
  <a href="https://i.stack.imgur.com/AhiEG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AhiEG.png" alt="enter image description here"></a></p>
  
  <p>so I have to add 360 labels like:</p>
  
  <pre><code>    var lineChartData = {
      labels: ["0",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "",
          "15 Years",
           "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "", "",
          "", "", "", "", "", "", "", "", "",
          "30 Years"],
      datasets: [
          {
              fillColor: "",
              data: [0]
          }
      ]
  
  }
  </code></pre>
  
  <p>Then my chart is look like this:<a href="https://i.stack.imgur.com/f99tC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f99tC.png" alt="enter image description here"></a></p>