javascript - Customize amcharts line Chart scrollbar

Question

I am trying to resize amcharts bar chart scrollbar. By default grep bar is full, but i want this 30%.

I already added this into line chart code is:

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.keepSelection = true;
dateAxis.start = 0;
dateAxis.end = 0.3;

Working fine in line chart, but not working in bar chart. I already tried to implement into line chart, but the same result. Full code:

<script>

        am4core.ready(function() {

            var chart_type = <?php echo json_encode($chart_type); ?>;

            if (chart_type == 1) {
                am4core.ready(function() {
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    // Create chart instance
                    var chart = am4core.create("chartdiv", am4charts.XYChart3D);
                    chart.paddingBottom = 30;
                    chart.angle = 35;
                    var title = chart.titles.create();
                    title.text = <?php echo json_encode($title); ?>;
                    title.fontSize = 25;
                    title.marginBottom = 30;

                    // Add data
                    chart.data = <?php echo json_encode($row1); ?>;
                    var barwidth = <?php echo json_encode($barwidth); ?> ; // Create axes
                    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                    categoryAxis.dataFields.category = "month";
                    categoryAxis.renderer.grid.template.location = 0;
                    categoryAxis.renderer.minGridDistance = 20;
                    categoryAxis.renderer.inside = true;
                    categoryAxis.renderer.grid.template.disabled = true;

                    let labelTemplate = categoryAxis.renderer.labels.template;
                    labelTemplate.rotation = -90;
                    labelTemplate.horizontalCenter = "left";
                    labelTemplate.verticalCenter = "middle";
                    labelTemplate.dy = 5; // moves it a bit down;
                    labelTemplate.inside = false; 

                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                    valueAxis.renderer.grid.template.disabled = true;

                    // Create series
                    var series = chart.series.push(new am4charts.ConeSeries());
                    series.dataFields.valueY = "data";
                    series.dataFields.categoryX = "month";
                    var columnTemplate = series.columns.template;
                    columnTemplate.adapter.add("fill", (fill, target) => {
                        return chart.colors.getIndex(target.dataItem.index);
                    })

                    columnTemplate.adapter.add("stroke", (stroke, target) => {
                        return chart.colors.getIndex(target.dataItem.index);
                    })

                    chart.scrollbarX = new am4core.Scrollbar();

                });
                // series.columns.template.width = am4core.percent(barwidth);
            } else if (chart_type == 2) {

                am4core.ready(function() {

                    // Themes begin
                    am4core.useTheme(am4themes_animated);
                    // Themes end

                    var chart = am4core.create("chartdiv", am4charts.XYChart);
                    var title = chart.titles.create();
                    title.text = <?php echo json_encode($title); ?>;
                    title.fontSize = 25;
                    title.marginBottom = 30;

                    var data = [];
                    var data_given = <?php echo json_encode($row1); ?>;
                    var value = 50;
                    for (x in data_given) {
                        //console.log(data_given[x].year);
                        var date = new Date(data_given[x].year, data_given[x].month);
                        // date.setHours(0,0,0,0);
                        // date.setDate(i);
                        value = data_given[x].data;
                        data.push({
                            date: date,
                            value: value
                        });
                    }
                    //exit();
                    chart.data = data;

                    // Create axes
                    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
                    //added fo zoom
                    dateAxis.keepSelection = true;
                    dateAxis.start = 0;
                    dateAxis.end = 0.3;
                    dateAxis.renderer.minGridDistance = 60;
                    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

                    // Create series
                    var series = chart.series.push(new am4charts.LineSeries());
                    series.dataFields.valueY = "value";
                    series.dataFields.dateX = "date";
                    series.tooltipText = "{value}"

                    series.tooltip.pointerOrientation = "vertical";
                    chart.cursor = new am4charts.XYCursor();
                    chart.cursor.snapToSeries = series;
                    chart.cursor.xAxis = dateAxis;

                    //chart.scrollbarY = new am4core.Scrollbar();
                    chart.scrollbarX = new am4core.Scrollbar();

                }); // end am4core.ready()

            } else {
                // pichart
            }

        });

    </script>

Check image Line chart (working)

Bar chart (not working)

Answer 1

等待大神答复