HTML chart display issue - move the chart inside of the card-CodePudding

I used the "Range Selector plugin" to create a line chart with the date selector.

The following codes are in my HTML file:

<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 >
   <div >
     <h6 >Area Chart</h6>
   </div>
   <div >
    <div >
     <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>

But my chart doesn't display properly. It is outside of the card:

Please advise what I should adjust to move the chart inside of the card

CodePudding user response：

You need to move your #chartdiv element inside the area chart card body. I have tried to do this with the HTML you supplied but it seems to be missing some CSS. I've managed to get it working though:

<html>
   <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        #chartdiv {
            height: 500px;
        }
    </style>
   </head>
   <body>
        <div id="selectordiv"></div>
        <div >
            <div >
                <h6 >Area Chart</h6>
            </div>
            <div >
                <div >
                    <div id="chartdiv"></div>
                </div>
            </div>
        </div>
        <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>
        <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>
   </body>
</html>