How to hide axes for no data case?

Question

I use live example from official documentation of ag-charts library. As you see, the chart consists of several bars. I try to disable all bars. To do it, I clicked on every item of a legend. After that, all bars are hidden and I see 'No visible series' text.

But I also see a vertical axis. I need to hide it too. Please help me to do it.

Here is a full config code:

{
  title: {
    text: "Apple's Revenue by Product Category",
  },
  subtitle: {
    text: "In Billion U.S. Dollars",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      direction: "horizontal",
      xKey: "quarter",
      yKey: "iphone",
      yName: "iPhone",
    },
    {
      type: "bar",
      direction: "horizontal",
      xKey: "quarter",
      yKey: "mac",
      yName: "Mac",
    },
    {
      type: "bar",
      direction: "horizontal",
      xKey: "quarter",
      yKey: "ipad",
      yName: "iPad",
    },
    {
      type: "bar",
      direction: "horizontal",
      xKey: "quarter",
      yKey: "wearables",
      yName: "Wearables",
    },
    {
      type: "bar",
      direction: "horizontal",
      xKey: "quarter",
      yKey: "services",
      yName: "Services",
    },
  ],
}

Answer 1

Pre-requisites: You need to define axes as this acts as the default value when adding the axes back to the chart when there is a legend item visible.

axes: any[] = [
  { type: 'quarter', position: 'left' },
  { type: 'number', position: 'bottom' },
];

Next, you need the legend listeners for both legendItemClick and legendItemDoubleClick so that when the listener is triggered, you can customize the chart to update the legend items' visible flag and add/remove the axes.

constructor() {
  this.options = {
    title: {
      text: "Apple's Revenue by Product Category",
    },
    subtitle: {
      text: 'In Billion U.S. Dollars',
    },
    data: getData(),
    series: [
        {
          type: 'bar',
          direction: 'horizontal',
          xKey: 'quarter',
          yKey: 'iphone',
          yName: 'iPhone',
        },
        {
          type: 'bar',
          direction: 'horizontal',
          xKey: 'quarter',
          yKey: 'mac',
          yName: 'Mac',
        },
        {
          type: 'bar',
          direction: 'horizontal',
          xKey: 'quarter',
          yKey: 'ipad',
          yName: 'iPad',
        },
        {
          type: 'bar',
          direction: 'horizontal',
          xKey: 'quarter',
          yKey: 'wearables',
          yName: 'Wearables',
        },
        {
          type: 'bar',
          direction: 'horizontal',
          xKey: 'quarter',
          yKey: 'services',
          yName: 'Services',
        },
      ],
    axes: this.axes,
    legend: {
      listeners: {
        legendItemClick: (event: AgChartLegendClickEvent) => {
          this.onLegendItemClick(event);
        },
        legendItemDoubleClick: (event: AgChartLegendDoubleClickEvent) => {
          this.onLegendItemClick(event);
        },
      },
    },
  };
}

onLegendItemClick(event: any) {
  // Default visible: true if visible is undefined
  this.options.series = this.options.series!.map((x: any) => ({
    ...x,
    visible: x.visible === undefined ? true : x.visible,
  }));

  switch (event.type) {
    case 'click':
      (this.options.series!.find(
        (x: any) => x.yKey == event.itemId
      ) as any)!.visible = event.enabled;

      break;

    case 'dblclick':
      this.options.series = this.options.series!.map((x: any) => ({
        ...x,
        visible: !x.visible,
      }));

      (this.options.series!.find(
        (x: any) => x.yKey == event.itemId
      ) as any)!.visible = event.enabled;

      break;
  }

  const allSeriesDisabled = this.options.series!.every(
    (e: any) => !e.visible
  );

  // Remove all axes when all series' visible false
  if (allSeriesDisabled) {
    this.options = {
      ...this.options,
      axes: [],
    };
  } else {
    this.options = {
      ...this.options,
      axes: this.axes,
    };
  }
}

Demo @ StackBlitz