0

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: {} }
      },
    };
  }
}

enter image description here

Skoby
  • 161
  • 1
  • 2
  • 10

0 Answers0