Высокие диаграммы имеют проблемы с настройкой чувствительной точки

Question

Team!

Я создал хай-чарты с функциями детализации и прокрутки - это довольно удобно, если я так скажу :).У меня есть одна заключительная проблема, делающая его идеальным графиком, и именно тогда, когда я смотрю на него на экране мобильного телефона / xs, столбцы столбцов «скручиваются» настолько близко, насколько это возможно, до такой степени, что они почтине читается.

Я поиграл с отзывчивой функцией на высоких графиках, и я установил настройку точек и группирования, чтобы расширить такты настолько, насколько они могут.Я также попытался использовать pointWidth, но это только позволило полосам накладываться друг на друга.

Единственное другое решение, которое я могу придумать, это попытаться расширить область графика, но я не могу найти способ сделать это - chart.wide расширяет весь график, но я хочу, чтобы он оставался меньшечем ширина устройства.

У кого-нибудь есть идеи, как я могу попытаться расширить столбцы?Вот ссылка на график.Чтобы понять, о чем я говорю, просто уменьшите ширину вашего браузера до минимума и нажмите на любой из столбцов на первом графике.

Любые идеи будут высоко оценены !!

//Build The Chart
var refChart = new Highcharts.chart('ctReferralsDetail', {
    chart: {
        backgroundColor: 'whiteSmoke',
        type: 'column',
        width: chartWidth,
        events: {
            drilldown: function (e) {
                var dt = $('#tblReferrals').DataTable();
                dt.destroy();

                $('#tblReferrals thead').empty();
                $('#tblReferrals tbody').empty();

                loadTableDetail(e.point.name);

                if (!e.seriesOptions) {
                    for (var i = 0; i < drilldown.length; i++) {
                        if (e.point.name == drilldown[i]) {
                            this.addSingleSeriesAsDrilldown(e.point, pyDet[i]);
                            this.addSingleSeriesAsDrilldown(e.point, cyDet[i]);
                            this.applyDrilldown();

                            var maxVal = (pyDet[i].categories.length - 1) < chartMax ? pyDet[i].categories.length - 1 : chartMax;

                            this.update({
                                xAxis: {
                                    categories: pyDet[i].categories,
                                    max: maxVal,
                                },
                                exporting: {
                                    sourceHeight: 475,
                                    sourceWidth: pyDet[i].categories * 4.5,
                                    chartOptions: {
                                        xAxis: [{
                                            categories: pyDet[i].categories,
                                            labels: {
                                                rotation: 90
                                            },
                                            max: pyDet[i].categories.length - 1,
                                        }]
                                    },

                                }
                            })
                        }
                    }
                }
            },
            drillupall: function () {
                var dt = $('#tblReferrals').DataTable();
                dt.destroy();

                $('#tblReferrals thead').empty();
                $('#tblReferrals tbody').empty();

                loadTableSummary();

                this.update({
                    xAxis: {
                        categories: categoriesAA,
                        max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax
                    },
                    exporting: {
                        sourceHeight: 350,
                        sourceWidth: 500,
                        chartOptions: {
                            xAxis: [{
                                categories: categoriesAA,
                                labels: {
                                    rotation: 0
                                },
                                max: categoriesAA.length - 1,
                            }]
                        },
                    }
                })
            },
        },
    },
    title: {
        text: title
    },
    subtitle: {
        text: subTitle
    },
    xAxis: {
        categories: categoriesAA,
        min: 0,
        max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax,
        scrollbar: {
            enabled: true
        },
    },
    yAxis: [{
        title: {
            useHtml: true,
            text: '<strong># Referrals</strong>'
        }
    }],
    tooltip: {
        shared: true,
    },
    plotOptions: {
        column: {
            borderRadius: 5,
            dataLabels: {
                enabled: true,
                allowOverlap: true,
            },
            groupPadding: 0.15,
            pointPadding: 0.05
        },
    },
    series: [{
        name: dataLabels[0],
        data: pyAA
    }, {
        name: dataLabels[1],
        data: cyAA
    }],
    drilldown: {
        allowPointDrilldown: false,
    },
    exporting: {
        scale: 1,
        sourceHeight: 350,
        sourceWidth: 500,
        chartOptions: {
            xAxis: [{
                categories: categoriesAA,
                labels: {
                    rotation: 0
                },
                max: categoriesAA.length - 1,
            }]
        },
    },
    credits: {
        enabled: false
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 575
            },

            chartOptions: {
                chart: {
                    width: chartWidth + 75,
                },
                plotOptions: {
                    column: {
                        groupPadding: 0,
                        pointPadding: 0,
                    }
                }
            }

        }]
    }
})