Scrollbar-only XY Chart

If you would like to use chart as a zoom control for your UI, you might want to display just chart’s scrollbar with a series preview in it, without showing the actual chart. This tutorial will show how.

We’ll take a regular XY chart as an example.

Add an XYChartScrollbar to it, as well as instruct it to show some series.

chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);

chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);

{
  // ...
  "series": {
    "id": "s1",
    // ...
  },
  "scrollbarX": {
    "type": "XYChartScrollbar",
    "series": ["s1"]
  }
}

MORE INFO For more info about XYChartScrollbar check “Scrollbar with preview” section in our XY chart article.

Finally, we’ll hide the whole plot area by disabling chart’s plotContainer:

chart.plotContainer.visible = false;

chart.plotContainer.visible = false;

{
  // ...
  "plotContainer": {
    "visible": false
  }
}

And that’s it:

Open in CodePen