How to solve this TypeScript error for Google Chart

Question

Error:

Argument of type '{ pointSize: number; animation: { startup: boolean; duration: number; easing: string; }; legend: string; hAxis: { viewWindow: { min: number; max: number; }; }; vAxis: { viewWindow: { min: number; max: number; }; }; }' is not assignable to parameter of type 'LineChartOptions'. Types of property 'legend' are incompatible. Type 'string' is not assignable to type '"none" | ChartLegend | undefined'.ts(2345)

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var rawData = [
    [0, 0],
    [1, 2],
    [2, 1],
    [3, 4],
    [4, 2],
    [5, 8],
    [6, 3],
    [7, 16],
    [8, 4],
    [9, 32]
  ];

  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"","label":"X","type":"number"},
      {"id":"","label":"Y","type":"number"}
    ]
  });

  var options = {
    pointSize: 4,
    animation:{
      startup: true,
      duration: 600,
      easing: 'in'
    },
    legend: 'none',
    hAxis: {
      viewWindow: {
        min: 0,
        max: 9
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 32
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div')!);

  google.visualization.events.addListener(chart, 'ready', function () {
    drawChart();
  });

  var rowIndex = 0;
  drawChart();
  function drawChart() {
    if (rowIndex < rawData.length) {
      data.addRow(rawData[rowIndex++]);
      chart.draw(data, options);
    }
  }
});

Getting error on options: chart.draw(data, options);

How to solve the error in drawing a prograsice line chart using Google Chart?

Answer 1

The problem stated that you are passing a string value to legend property which it expects the value with 'none' or ChartLegend type.

Either you can specify the type as:

legend: 'none' as 'none' | google.visualization.ChartLegend

or declare the type as any to ignore type checking.

legend: 'none' as any

Note that, since you mention that you are using the angular-google-charts library (in tag), would also propose you use the <google-chart> element.

<google-chart
  [title]="chart.title"
  [type]="chart.type"
  [data]="chart.data"
  [columns]="chart.columnNames"
  [options]="chart.options"
>
</google-chart>

import { ChartType, ScriptLoaderService } from 'angular-google-charts';
  
chart = {
  title: '',
  type: ChartType.LineChart,
  data: [
    [0, 0],
    [1, 2],
    [2, 1],
    [3, 4],
    [4, 2],
    [5, 8],
    [6, 3],
    [7, 16],
    [8, 4],
    [9, 32],
  ],
  columnNames: [
    { id: '', label: 'X', type: 'number' },
    { id: '', label: 'Y', type: 'number' },
  ],
  options: {
    pointSize: 4,
    animation: {
      startup: true,
      duration: 600,
      easing: 'in',
    },
    legend: 'none' as 'none' | google.visualization.ChartLegend,
    hAxis: {
      viewWindow: {
        min: 0,
        max: 9,
      },
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 32,
      },
    },
    width: 448,
  }
};

Using the <google-chart> element may result in the width size of the graph being different compared to the graph generated via the google-visualization API. So you need to define the width within the options.

Demo @ StackBlitz