scrollbarX not visible in screen either not getting error thrown

[3gwebtrain]

Here is my code for generated graph:

` this.browserOnly(() => { const root = am5.Root.new('chartdiv'); 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);
  }

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

  chart.set('scrollbarX', scrollbarX);

  scrollbarX.thumb.setAll({
    fill: am5.color(0x550000),
    fillOpacity: 0.1,
  });

  scrollbarX.startGrip.setAll({
    visible: true,
  });

  scrollbarX.endGrip.setAll({
    visible: true,
  });

  var sbxAxis = scrollbarX.chart.xAxes.push(
    am5xy.DateAxis.new(root, {
      groupData: true,
      baseInterval: { timeUnit: 'year', count: 5 },
      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

    var sbseries = scrollbarX.chart.series.push(
      am5xy.LineSeries.new(root, {
        xAxis: sbxAxis,
        yAxis: sbYaxis,
        valueYField: field,
        valueXField: 'year',
      })
    );

    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));

  var legend = chart.children.push(am5.Legend.new(root, {}));
  legend.data.setAll(chart.series.values);
});`

but getting no scrollbarX detail in the screen. as well no error too. Live demo Live demo

[martynasma]

You are creating a scrollbar object, but don't attach it to a chart. Add this:

chart.set("scrollbarX", scrollbarX);

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.