Usé el "complemento Selector de rango" para crear un gráfico de líneas con el selector de fecha.

Los siguientes códigos están en mi archivo HTML:

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <script src="https://cdn.amcharts.com/lib/4/plugins/rangeSelector.js"></script> <div id="chartdiv"></div> <div id="selectordiv"></div> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Area Chart</h6> </div> <div class="card-body"> <div class="chart-line"> <canvas id="chart"></canvas> <script> var chart = am4core.create("chartdiv", am4charts.XYChart); chart.paddingRight = 20; var data = []; var visits = 10; for (var i = 1; i < 50000; i++) { visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); data.push({ date: new Date(2018, 0, i), value: visits }); } chart.data = data; var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.grid.template.location = 0; dateAxis.minZoomCount = 5; dateAxis.groupData = true; dateAxis.groupCount = 500; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.dateX = "date"; series.dataFields.valueY = "value"; series.tooltipText = "{valueY}"; series.tooltip.pointerOrientation = "vertical"; series.tooltip.background.fillOpacity = 0.5; chart.cursor = new am4charts.XYCursor(); chart.cursor.xAxis = dateAxis; var scrollbarX = new am4core.Scrollbar(); scrollbarX.marginBottom = 20; chart.scrollbarX = scrollbarX; var selector = new am4plugins_rangeSelector.DateAxisRangeSelector(); selector.container = document.getElementById("selectordiv"); selector.axis = dateAxis; </script> </div> </div> </div>

Pero mi gráfico no se muestra correctamente. Está fuera de la tarjeta:

Indique qué debo ajustar para mover el gráfico dentro de la tarjeta.