I'm trying to plot a line chart with trendline in angular using the angular-google-chart library. The x-axis of the graph is string values, whereas the y-axis values are numeric. Is it possible to plot a trendline(broken line in red on the image) to the existing line chart? Following the documentation of Google chart, I tried to add a trendline configuration inside the options parameter but it has no effect on the linear graph, hence I believe that only continuous values on both axes are supported, like, "date", "datetime", "time of day" or "number". Any workaround to achieve this?
import { Component, OnInit } from '@angular/core';
import { ChartType } from 'angular-google-charts';
@Component({
selector: 'app-linear-chart',
template: '<google-chart [data]="chartData" [options]="chartOptions" [chartType]="chartType"></google-chart>',
})
export class LinearChartComponent implements OnInit {
chartData: [string, number][]=[];
chartOptions: {};
chartType: ChartType= ChartType.LineChart;
ngOnInit(): void {
this.chartData = {
chartType: this.chartType,
dataTable: [
['X', 'Y'],
['A', 1],
['B', 3],
['C', 2],
['D', 5],
['E', 4],
],
options: {
title: 'Linear Chart with Function Curve Type',
curveType: 'function',
width: 500,
height: 300,
trendlines: { 0: {} }
},
};
}
}