I'm trying to convert my current Google Chart written in ReactJS to the new Angular 10 web app. I've found this angular-google-charts which seem to be the Angular version of the React's react-google-charts.
Unfortunately, the Angular library is lacking in the documentation department. I was able to piece a partial working chart from Google search and was able to replicate the same result as the existing chart, but I cannot figure out as to how I can set legends, at the moment they are empty.
Here's the current code I have:
import { Component, OnInit } from '@angular/core';
import { ChartType } from 'angular-google-charts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
chartType = ChartType.Bar;
chartOptions = {
colors: ['#216f31', '#a00909'],
legend: { position: 'top', maxLines: 3 },
};
columns: ['Income', 'Expenses', ];
chartData = [
// ['Month', 'Income', 'Expenses'],
['Apr', 1398.36, 0],
['May', 3255.20, 2704.15],
['Jun', 390, 3348.40],
['Jul', 1300.00, 0],
['Aug', 382.50, 0],
];
constructor() {
}
ngOnInit(): void {
}
}<fieldset class="position-relative ml-2">
<legend class="display-4 mb-0">Chart</legend>
<google-chart style="width: 90%; height: 80%;"
[type]="chartType"
[options]="chartOptions"
[columns]="columns"
[data]="chartData"></google-chart>
</fieldset>This what it produces
This what the React version looks like
Does anyone have any idea how I can get the two legends on the right to populate as it has on the React one?
ps: the commented-out line in the chartData array is all it takes to produce the legends in React, but that doesn't work on Angular
Any help is much appreciated.
In case anyone's wondering I've also tried the ng2-charts as well but it's more complex than what I need and I'd like to leave that as a last resource since I've to transform my data structure to a much more complicated one for that to work.
