How to change text size for bar-chart?

Question

I have bar chart. I need to change labels fontSize. To do this i try to use the following part of documentstion: https://ag-grid.com/charts/options/axes/number/#reference-AgNumberAxisOptions-label-fontSize

However fontSize of labels wast changed. Please help me to do it. Live example is here

Here is a entire config:

{
  theme: {
    palette: {
      fills: ["red", "blue"],
      strokes: ["#000"],
    },
    axes: {
      label: {
        fontSize: 40,
      },
    },
    overrides: {
      common: {
        axes: {
          label: {
            fontSize: 30,
          },
        },
        title: {
          enabled: true,
          fontSize: 14,
          fontWeight: 600,
          textAlign: "left",
          fontFamily: "Segoe UI",
          spacing: 24,
          text: "qwe",
        },
        padding: {
          left: 16,
          top: 16,
          right: 16,
          bottom: 0,
        },
      },
    },
  },
  data: [
    {
      quarter: "1987",
      iphone: 96,
      mac: 22,
    },
    {
      quarter: "1990",
      iphone: 104,
      mac: 22,
    },
  ],
  series: [
    {
      type: "bar",
      xKey: "quarter",
      yKey: "iphone",
      stacked: true,
      direction: "horizontal",
    },
    {
      type: "bar",
      xKey: "quarter",
      yKey: "mac",
      stacked: true,
      direction: "horizontal",
    },
  ],
};

Answer 1

We can set the axes property which is an array. One for each axis in the chart, We have to set this at the root of the options for it to work.

I am unable to set it at the overrides level, but it works at the root level.

this.options = {
      axes: [ // <- notice!
        {
          type: 'category',

          label: {
            fontSize: 30,
          },
        },
        {
          type: 'number',
          label: {
            fontSize: 30,
          },
        },
      ],
      common: {
        ...

Full Code:

import { Component } from '@angular/core';
import { AgCharts } from 'ag-charts-angular';
import { AgChartOptions } from 'ag-charts-community';
import { getData } from './data';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [AgCharts],
  template: `<ag-charts [options]="options"></ag-charts> `,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      axes: [
        {
          type: 'category',

          label: {
            fontSize: 30,
          },
        },
        {
          type: 'number',
          label: {
            fontSize: 30,
          },
        },
      ],
      common: {
        theme: {
          palette: {
            fills: ['red', 'blue'],
            strokes: ['#000'],
          },
          overrides: {
            title: {
              enabled: true,
              fontSize: 14,
              fontWeight: 600,
              textAlign: 'left',
              fontFamily: 'Segoe UI',
              spacing: 24,
              text: 'qwe',
            },
            padding: {
              left: 16,
              top: 16,
              right: 16,
              bottom: 0,
            },
          },
        },
      },
      data: [
        {
          quarter: '1987',
          iphone: 96,
          mac: 22,
        },
        {
          quarter: '1990',
          iphone: 104,
          mac: 22,
        },
      ],
      series: [
        {
          type: 'bar',
          xKey: 'quarter',
          yKey: 'iphone',
          stacked: true,
          direction: 'horizontal',
        },
        {
          type: 'bar',
          xKey: 'quarter',
          yKey: 'mac',
          stacked: true,
          direction: 'horizontal',
        },
      ],
    };
  }
}

Plunker Demo