Duplicate labels on X Axis -charts js

user_7382602 0
Viewed 2567

I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable

    lineChartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          type: 'time',
          time: {
             parser: 'YYYY-MM-DD HH:mm:ss',
             unit: 'day',
             autoSkip: true,
             displayFormats: {
                day: 'MMM-DD'
             }
          },
          ticks: {

             source: 'data',

          },
          scaleLabel: {
            display: true,
            labelString: 'Date'
          }
       }],
        yAxes: [{
            ticks: {
                beginAtZero:true,
            },
            scaleLabel: {
              display: true,
              labelString: 'Values'
            }
        }]
    }
}


   <canvas class ="can" baseChart [chartType]="lineChartType" [datasets]="lineChartData" [labels]="lineChartLabels"
              [options]="lineChartOptions" [colors]="lineChartColors" [legend]="true" (chartClick)="chartClicked($event)">
            </canvas>

i need to remove highlighted red color duplicate labels on below mentioned screen shots. How to do?

enter image description here

ionic-framework angular typescript css html
1 Answers
 xAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Date',
      },
      type: 'time', 
      time: {
           parser: 'YYYY-MM-DD HH:mm:ss',
           unit: 'day',
           displayFormats: {
              day: 'MMM-DD'
            }
        }
   }]

Change the X-axis like above code. then it will automatically removes duplicates from x-axis label

user_73826020
Related