1

I'm using angular-google-charts and I dont' know why I'm not able to change the color of hAxis gridlines.

This is my component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
  public chart1: any;

  constructor() { }

  ngOnInit(): void {


    this.chart1 = {
      title: 'Test',
      type: 'LineChart',
      data: [
        [0, 15],
        [1, 27],
        [2, 11],
        [3, 14]
      ],
      columnNames: ["Giorno", "Valori"],
      options: {   
         hAxis: {
            title: 'Giorno',
            gridlines: { color: '#FF000' },
            gridlineColor: '#FF000',
            baselineColor: '#FF0000',
         },
         vAxis:{
            title: 'Valori'
         },
      },
    };

  }

}

And this si my view:

<google-chart style="width: 1000px;height: 500px;"
    [title]="chart1.title"
    [type]="chart1.type"
    [data]="chart1.data"
    [columns]="chart1.columnNames"
    [options]="chart1.options">
</google-chart>

And this is the output:

enter image description here

"hAxis.gridlines.color" and also "hAxis.gridlineColor" properties don't change the color of vertival grids...

What am I doing wrong?

Pinaki
  • 792
  • 8
  • 17
Domenico
  • 208
  • 2
  • 7

1 Answers1

1

You are providing the hexadecimal format color wrong as it should be in the form of #rrggbb (you are just providing 5 instead of 6 values). Change it accordingly from:

            gridlines: { color: '#FF000' },
            gridlineColor: '#FF000',

to

         hAxis: {
            title: 'Giorno',
            gridlines: { color: '#FF000' }
         }

Reference

Mateo Randwolf
  • 2,823
  • 1
  • 6
  • 17
  • I have detailed further my answer @Pinaki – Mateo Randwolf Feb 16 '21 at 09:52
  • Yes, It is possible to change vAxis & hAxis baseline, gridline colors with hex color code and color name. Please check this - https://stackblitz.com/edit/angular11-googlechart – Pinaki Feb 17 '21 at 15:28