Angular Google Line Chart - The Line gets cut/breaks for some particular data points.

[nmk1212]

Hi,

I implemented google-chart(line chart) in my angular project. For some data points the line is like breaking/cut(it's like erased kind of thing). I will mention the data points and charts options that i am using below. Could anyone help me resolve this?

Note: I tried resizing or increasing width and all it didn't worked.

Google chart version in my package.json : "angular-google-charts": "^0.1.6",

Code I used for google line charts:

Chart options:

ChartOptions: any = { legend: { position: 'none' }, tooltip: { isHtml: true }, annotations: { textStyle: { fontSize: 11, fontFamily: 'Source Sans Pro' }, alwaysOutside: true, stem: { // length: 12 }, }, curveType: 'function', colors: ['#44a2d5'], hAxis: { title: 'Time', format: 'MMM, YYYY', titleTextStyle: { fontSize: 13 }, gridlines: { count: 0, color: 'transparent' }, slantedText: true, showTextEvery: 1, maxTextLines: 3, ticks: [], textStyle: { fontSize: 13, fontFamily: 'Source Sans Pro' } }, vAxis: { title: 'Rate', format: '0%', viewWindow: { min: 0, max: 1 }, textStyle: { fontSize: 10, }, titleTextStyle: { fontSize: 10, }, gridlines: { count: 0, }, }, series: { 0: { pointSize: 5, }, }, chartArea: { width: 'auto', height: 'auto', top: 15, right: 60, left: 60, }, };

---

typescript:

this.rot_ChartOptions.hAxis.ticks = tickMarks; this.rot_ChartDataRaw.unshift(chartColumns) this.loaderService.onReady.subscribe(() => { this.loaderService.loadChartPackages(this.chartTypes).subscribe(() => { this.rot_ChartData = google.visualization.arrayToDataTable(this.rot_ChartDataRaw, false); }); });

---

### HTML <google-chart *ngIf="rot_ChartData" #chart class="line-chart" [type]="LineChart" style="height: 350px !important; width: 600px !important;" [data]="rot_ChartData" [options]="rot_ChartOptions" [dynamicResize]="true">

Could any one look into this ASAP