Not able to produce `scrollbarX` values, shows empty

Question

I am trying to create a line graph with xscrollbar like:

but getting empty:

not able to understand the issue. Live Demo

ts file:

import * as am5 from '@amcharts/amcharts5';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
import * as am5xy from '@amcharts/amcharts5/xy';
import { isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  Component,
  Inject,
  Input,
  NgZone,
  OnInit,
  PLATFORM_ID,
} from '@angular/core';

export interface DataProps {
  year?: string;
  europe: number;
  namerica: number;
  asia: number;
}
@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
})
export class HelloComponent implements AfterViewInit {
  graphRoot!: am5.Root;
  constructor(
    @Inject(PLATFORM_ID) private platformId: Record<string, unknown>,
    private zone: NgZone
  ) {}

  browserOnly(f: () => void) {
    if (isPlatformBrowser(this.platformId)) {
      this.zone.runOutsideAngular(() => {
        f();
      });
    }
  }

  ngAfterViewInit() {
    this.browserOnly(() => {
      const root = am5.Root.new('chartdiv');
      // Set themes
      root.setThemes([am5themes_Animated.new(root)]);

      const data: DataProps[] = [
        {
          year: '2021',
          europe: 5,
          namerica: 2.5,
          asia: 1,
        },
        {
          year: '2022',
          europe: 2.6,
          namerica: 6.7,
          asia: 2.2,
        },
        {
          year: '2023',
          europe: 4.8,
          namerica: 1.9,
          asia: 4.4,
        },
      ];

      const chart = root.container.children.push(
        am5xy.XYChart.new(root, {
          panY: false,
          panX: false,
          layout: root.verticalLayout,
        })
      );

      const yAxis = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererY.new(root, {}),
        })
      );

      const xAxis = chart.xAxes.push(
        am5xy.CategoryAxis.new(root, {
          maxDeviation: 0.2,
          renderer: am5xy.AxisRendererX.new(root, {}),
          categoryField: 'year',
        })
      );

      let updatedData: DataProps[] = [];
      const setDatas = (data: DataProps) => {
        updatedData = [...updatedData, data];
        xAxis.data.setAll(updatedData);
      };

      for (const [key, value] of Object.entries(data)) {
        setDatas(value);
      }

      const scrollbarX = am5xy.XYChartScrollbar.new(root, {
        orientation: 'horizontal',
        height: 50,
      });

      chart.set('scrollbarX', scrollbarX);

      const sbXaxis = scrollbarX.chart.xAxes.push(
        am5xy.DateAxis.new(root, {
          groupData: true,
          baseInterval: { timeUnit: 'year', count: 1 },
          renderer: am5xy.AxisRendererX.new(root, {
            opposite: false,
            strokeOpacity: 0,
          }),
        })
      );

      const sbYaxis = scrollbarX.chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererY.new(root, {}),
        })
      );

      const drawSeriesAxis = (name: string, field: string) => {
        const series = chart.series.push(
          am5xy.LineSeries.new(root, {
            name: name,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: field,
            categoryXField: 'year',
            stacked: true,
          })
        );

        //scrollbar

        const sbSeries = scrollbarX.chart.series.push(
          am5xy.LineSeries.new(root, {
            name: name,
            xAxis: sbXaxis,
            yAxis: sbYaxis,
            valueYField: field,
            categoryXField: 'year',
            stacked: false,
          })
        );
        series.data.setAll(updatedData);
        sbSeries.data.setAll(updatedData);
      };

      const nameOfSeries = ['Europe', 'North America', 'Asia'];
      const omit = ['year'];
      const merged = Object.assign({}, ...updatedData);
      const keys = Object.keys(merged).filter((key) => !omit.includes(key));

      keys.forEach((key, i) => drawSeriesAxis(nameOfSeries[i], key));
    });
  }

  OnDestroy() {
    this.browserOnly(() => {
      if (this.graphRoot) {
        this.graphRoot.dispose();
      }
    });
  }
}

Answer 1

Your xAxis should probably not be acategory axis, especially because you defined adate axisfor sbXaxis. If you configure your xAxis to be a date axis, you will need to:

• Work preferably withtimestampsordate objects
• Set a baseInterval (e.g. { timeUnit: "year", count: 1 })
• Use valueXField instead of categoryXField in series settings

Here is a sn-p without Angular nor TypeScript, but with ES2015 syntax:

 am5.ready(() => {
 
   let root = am5.Root.new("chartdiv");

   let data = [
     {
       year: new Date("2021").getTime(),
       europe: 5,
       namerica: 2.5,
       asia: 1,
     },
     {
       year: new Date("2022").getTime(),
       europe: 2.6,
       namerica: 6.7,
       asia: 2.2,
     },
     {
       year: new Date("2023").getTime(),
       europe: 4.8,
       namerica: 1.9,
       asia: 4.4,
     },
   ];

   let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

   let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
     baseInterval: { timeUnit: "year", count: 1 },
     renderer: am5xy.AxisRendererX.new(root, {})
   }));
   
   let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
     renderer: am5xy.AxisRendererY.new(root, {})
   }));

   let scrollbarX = am5xy.XYChartScrollbar.new(root, {
     orientation: "horizontal",
     height: 50,
   });

   chart.set("scrollbarX", scrollbarX);

   let sbXaxis = scrollbarX.chart.xAxes.push(am5xy.DateAxis.new(root, {
     baseInterval: { timeUnit: "year", count: 1 },
     renderer: am5xy.AxisRendererX.new(root, {})
   }));

   let sbYaxis = scrollbarX.chart.yAxes.push(am5xy.ValueAxis.new(root, {
     renderer: am5xy.AxisRendererY.new(root, {})
   }));
   
   let drawSeries = (name, field) => {
     let series = chart.series.push(am5xy.LineSeries.new(root, {
       name,
       xAxis,
       yAxis,
       valueXField: "year",
       valueYField: field
      }));

     let sbSeries = scrollbarX.chart.series.push(am5xy.LineSeries.new(root, {
       name,
       xAxis: sbXaxis,
       yAxis: sbYaxis,
       valueXField: "year",
       valueYField: field
      }));

     series.data.setAll(data);
     sbSeries.data.setAll(data);
   };
   
   drawSeries("Europe", "europe");
   drawSeries("North America", "namerica");
   drawSeries("Asia", "asia");

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>