I have incorporated a Google chart within a mat-grid-tile. In this setup, one column displays a value of 50, while the other showcases a value of 30. These particular values are sourced from myService and are accurate. Although when I hover over the bars in the chart, the tooltip reflects the correct values, the column heights themselves do not align with the specified values - particularly the 30 value appears shorter than expected. How can I rectify this discrepancy?
https://i.sstatic.net/miBCI.jpg
Below is what I've attempted:
TS File
ysData: any;
options = {
backgroundColor: '#fafafa',
legend: { position: 'none' },
hAxis: {
baselineColor: 'none',
ticks: []
},
vAxis: {
baselineColor: 'none',
ticks: []
},
colors: ['ffc000']
}
constructor()
{
this.ysData = [["Growth", this.myService.growth], ["Health", this.myService.health]];
}
HTML
<mat-grid-tile [colspan]="2" [rowspan]="12">
<google-chart #chart
[type]="'ColumnChart'"
[data]="ysData"
[options]="options"
[dynamicResize]="true"
[width]="200" [height]="400">
</google-chart>
</mat-grid-tile>