NGX-charts Shows only 8 bars but there is more then 20 records

Question

I am trying ngx-charts it has 20 records but in the graph output(in view) it is showing only 8 bars for the first 8 records and not showing bars for remaining records. Below I am add details and Code i am using

Data

single: any[] = [
    { "name": "2020/05/27", "value": 8 },
    { "name": "2020/06/24", "value": 5 },
    { "name": "2020/07/04", "value": 4 },
    { "name": "2020/08/02", "value": 3 },
    { "name": "2020/09/07", "value": 9 },
    { "name": "2020/09/22", "value": 1 },
    { "name": "2020/09/23", "value": 5 },
    { "name": "2020/10/05", "value": 6 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 },
    { "name": "2020/07/04", "value": 9 }
  ];

Output

Code

chartConfig: any = {
    width: 1210,     // 210
    height: 500,     // 30
    showXAxis: false,  // Default Value: true
    showYAxis: false,  // Default Value: true
    gradient: false,  // Default Value: false
    showLegend: false,  // Default Value: true
    showXAxisLabel: false,  // Default Value: true
    showYAxisLabel: false,  // Default Value: true
    tooltipDisabled: true,   // Default Value: true
    xAxisLabel: 'Country',  // Default Value: 'Country'
    yAxisLabel: 'Population'  // Default Value: 'Population'
  };


<app-user-chart [data]="single" [chartConfig]="chartConfig"></app-user-chart>

the above is the. It have more than 20 records but in the image it shows only 8 vertical line in chart. How we can get the chart for all the records and fit it in small area of 200x50px