Series gets invisible after pushing it into XYChartScrollbar in amCharts v4

Question

I would like to have a scrollbar with a category axis inside that is the same category axis as one of the charts. I noticed when I push the axis then the grid gets invisible. The same problem occurs with the data series. Namely: when the following line is commented:

const scroll_series = scroller.scrollbarChart.series.push(series1);

Example below:

window.onload = () => {
  // Create chart instance
  chart = am4core.create("chartdiv", am4charts.XYChart);

  chart.data = [
    {
      date: "2012-01-01",
      value: 8
    },
    {
      date: "2012-01-02",
      value: 10
    },
    {
      date: "2012-01-03",
      value: 12
    },
    {
      date: "2012-01-04",
      value: 14
    },
    {
      date: "2012-01-05",
      value: 11
    },
    {
      date: "2012-01-06",
      value: 6
    },
    {
      date: "2012-01-07",
      value: 7
    },
    {
      date: "2012-01-08",
      value: 9
    },
    {
      date: "2012-01-09",
      value: 13
    },
    {
      date: "2012-01-10",
      value: 15
    },
    {
      date: "2012-01-11",
      color: "#CC0000",
      value: 19
    },
    {
      date: "2012-01-12",
      value: 21
    },
    {
      date: "2012-01-13",
      value: 22
    },
    {
      date: "2012-01-14",
      value: 20
    },
    {
      date: "2012-01-15",
      value: 18
    },
    {
      date: "2012-01-16",
      value: 14
    },
    {
      date: "2012-01-17",
      value: 16
    },
    {
      date: "2012-01-18",
      value: 18
    },
    {
      date: "2012-01-19",
      value: 17
    },
    {
      date: "2012-01-20",
      value: 15
    },
    {
      date: "2012-01-21",
      value: 12
    },
    {
      date: "2012-01-22",
      value: 10
    },
    {
      date: "2012-01-23",
      value: 8
    }
  ];

  // Create axes
  const dateAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  dateAxis.dataFields.category = "date";
  dateAxis.renderer.grid.template.disabled = false;
  dateAxis.fontSize = 22;

  // Value Axis
  const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.renderer.grid.template.disabled = false;
  valueAxis.renderer.line.strokeOpacity = 0.3;
  valueAxis.renderer.line.strokeWidth = 2;
  valueAxis.renderer.line.stroke = am4core.color("rgba(255, 255, 255, 0.4)");

  // Create series
  const series1 = chart.series.push(new am4charts.LineSeries());
  series1.dataFields.valueY = "value";
  series1.dataFields.categoryX = "date";
  series1.strokeWidth = 4;
  series1.strokeOpacity = 1;

  // Scroller
  const scroller = new am4charts.XYChartScrollbar();
  chart.scrollbarX = scroller;
  const scroll_series = scroller.scrollbarChart.series.push(series1);
};
   

Answer 1

You shouldn't push the series into the XYChartScrollbar.scrollbarChart object, but directly into XYChartScrollbar. Then, if you want to display only the axis labels, you can set the series invisible.

Instead of the line:

const scroll_series = scroller.scrollbarChart.series.push(series1);

You should have:

const scroller_series = scroller.series.push(series1);
scroller.scrollbarChart.plotContainer.visible = false;