How can I make AMchart 4 horizontally scrollable without showing scrollbars

Question

I am working on mobile screen only application and using AMCharts 4 in Angular 5. I have tried many different tricks and solutions to make the the line chart horizontally scrollable while displaying only a portion of the data given at any one time without having to display the scrollbar to no avail.

Below is my code to generate the chart:

this.data = [{
  id: 156
  tran_amount: "125.0"
  value_date: "2019-02-05T12:00:46.173"
}, {
  tran_amount: "12345.0"
  value_date: "2019-01-05T12:00:46.173"
}];

let chart = am4core.create("amchart-container", am4charts.XYChart);
chart.data = [];
let categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.dataFields.date = "value_date";
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.zoom({start: 0.8, end: 1, priority: 'end'});
valueAxis.renderer.labels.template.disabled = true;

// valueAxis.title.text = "Account Balance";
// valueAxis.renderer.labels.template.adapter.add("text", function(text, target) {
//   return "" ;
// });
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "tran_amount";
lineSeries.dataFields.dateX = "value_date";
chart.cursor = new am4charts.XYCursor();
// chart.cursor.element.addStyle({})
chart.cursor.behavior = 'panX';
// chart.cursor.disabled = true;
// chart.cursor.marginLeft = 0;
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.height = new am4core.Percent(0);
chart.scrollbarX.width = new am4core.Percent(10);
// chart.scrollbarX.disabled = true;
chart.zoomOutButton.disabled = true;
chart.swipeable = true;
chart.events.on('ready', () => {
  // setTimeout(() => valueAxis.zoom({start: 0, end: 0.2, priority: 'start'}), 300);
  chart.maxZoomFactor = 32;
  chart.zoomToIndexes(this.data.length - 1 < 0 ? 0 : this.data.length - 1, this.data.length);

  console.log('ready');

})'
this.chart.data = this.data;

Answer 1

The code has a lot of problems. Here is a cleaned up, working example where the chart will scroll if you do that with touch:

let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
  tran_amount: 125.0,
  value_date: new Date("2019-01-05T12:00:00.000")
}, {
  tran_amount: 12345.0,
  value_date: new Date("2019-02-05T12:00:00.000")
}, {
  tran_amount: 12345.0,
  value_date: new Date("2019-03-05T12:00:00.000")
}];
let categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.start = 0.7;
categoryAxis.keepSelection = true;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "tran_amount";
lineSeries.dataFields.dateX = "value_date";
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = 'panX';
chart.scrollbarX = new am4core.Scrollbar();
chart.zoomOutButton.disabled = true;
chart.swipeable = true;