BAhdoot
Posts: 6
Joined: Wed Nov 09, 2022 4:50 pm

Mobile view of Date Picker bugged

Hello all.
I have a single series Highstock line graph with a date picker. The implementation on mobile works great, but there is a bug when you open it in mobile view. The first date <input> tag, when clicked, displays a dropdown for the preset zoom quick links. The second <input> tag works as expected and allows for the Max date to be specified for the series.

Link to demonstrate:
https://www.tcw.com/Products/Funds/UCIT ... ---pricing
Select United Kingdom, Institutional Investor
Click on the "Historical NAVs" tab

This does not appear to be replicatable on a scaled down browser, but is easily replicatable on a mobile device/browser. Please advise.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Mobile view of Date Picker bugged

Hi there,

Indeed I can see the issue on your website, but I have tried to reproduce it on our side, and everything seems to be working fine.
Could you please check if the same issue happens in this demo: https://www.highcharts.com/demo/stock/basic-line
Also, tell me which Highstock version are you using?
Would you be able to reproduce this exact chart config (since we have no access to your source code) so that I can work directly on the code?

Thank you,
Regards
Kamil Musiałowski
Highcharts Developer
BAhdoot
Posts: 6
Joined: Wed Nov 09, 2022 4:50 pm

Re: Mobile view of Date Picker bugged

Thank you for the quick response! Here is the format object that we are using to create the chart. It is safe to assume that we have data for all series that need them, but the bm**exists vars are all false so we do not render any bm data

Code: Select all

var bm1yrexists = false;
var bm3yrexists = false;
var bm5yrexists = false;
var bm10yrexists = false;
var bmfullexists = false;
var propertiesObj = {
    height: 306,
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            second: '%Y-%m-%d<br/>%H:%M:%S',
            minute: '%Y-%m-%d<br/>%H:%M',
            hour: '%Y-%m-%d<br/>%H:%M',
            day: '%b-%d',
            week: '%b %Y',
            month: '%b %Y',
            year: '%b %Y'
        }
    },
    scrollbar: {
        enabled: false
    },
    rangeSelector: {
        allButtonsEnabled: true,
        selected: 5,
        inputDateFormat: '%d/%m/%Y',
        inputEditDateFormat: '%d/%m/%Y',
        inputEnabled: false,
        buttons: [{
            type: 'year',
            count: 1,
            text: '1y',
            events: {
                click: function () {
                    chart.series[0].setData(data1yr, true, true, true);
                    if (bm1yrexists) {
                        chart.series[1].setData(bmdata1yr, true, true, true);
                    }
                    else {
                        chart.series[1].setData([], true, true, true);
                    }
                    chart.reflow();
                }
            }
        }, {
            type: 'year',
            count: 3,
            text: '3y',
            events: {
                click: function () {
                    chart.series[0].setData(data3yr, true, true, true);
                    if (bm3yrexists) {
                        chart.series[1].setData(bmdata3yr, true, true, true);
                    }
                    else {
                        chart.series[1].setData([], true, true, true);
                    }
                    chart.reflow();
                }
            }
        }, {
            type: 'year',
            count: 5,
            text: '5y',
            events: {
                click: function () {
                    chart.series[0].setData(data5yr, true, true, true);
                    if (bm5yrexists) {
                        chart.series[1].setData(bmdata5yr, true, true, true);
                    }
                    else {
                        chart.series[1].setData([], true, true, true);
                    }
                    chart.reflow();
                }
            }
        }, {
            type: 'year',
            count: 10,
            text: '10y',
            events: {
                click: function () {
                    chart.series[0].setData(data10yr, true, true, true);
                    if (bm10yrexists) {
                        chart.series[1].setData(bmdata10yr, true, true, true);
                    }
                    else {
                        chart.series[1].setData([], true, true, true);
                    }
                    chart.reflow();
                }
            }
        }, {
            type: 'all',
            text: 'All',
            events: {
                click: function () {
                    chart.series[0].setData(datafull, true, true, true);
                    if (bmfullexists) {
                        chart.series[1].setData(bmdatafull, true, true, true);
                    }
                    else {
                        chart.series[1].setData([], true, true, true);
                    }
                    chart.reflow();
                }
            }
        }]
    },
    title: {
        text: ''
    },
    yAxis: {
        labels: {
            formatter: function () {
                var label = this.axis.defaultLabelFormatter.call(this);
                if (/^[0-9]{4}$/.test(label)) {
                    return Highcharts.numberFormat(this.value, 0);
                }
                return label.replace('k', 'K');
            }
        },
        showLastLabel: true,
        showFirstLabel: true,
        opposite: false,
        title: {
            rotation: 0,
            text: "<span>$</span>",
            useHTML: true
        }
    },
    navigator: {
        enabled: false
    },
    series: [{
        name: 'TCW',
        type: 'area',
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.16).get('rgba')],
                [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.015).get('rgba')]
            ]
        },
        fillOpacity: 0.16,
        threshold: null,
        data: datafull,
        tooltip: {
            valueDecimals: 2,
            valuePrefix: "$"
        },
        showInLegend: true,
        events: {
            legendItemClick: function () {
                return false;
            }
        }
    }],
    credits: {
        enabled: false
    },
    tooltip: {
        backgroundColor: '',
        borderRadius: 0,
        borderWidth: 0
    },
    padding: 0,
    shadow: false,
    shape: "chart-arrow",
    style: {
        color: "#ffffff"
    },
    useHTML: true,
};
var chart = Highcharts.stockChart('chart-cumulative', propertiesObj, function (chart) { });
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Mobile view of Date Picker bugged

Hi there,

Thank you, but in order to work on your case, I would need an actual working demo, with your data, reproduced in for example JSFiddle. To reproduce it you can start here: https://jsfiddle.net/BlackLabel/9afjL3n2/
Once you create a live demo with the same issue reproduced, please send me a forked link to it.

Also, you haven't replied to my previous question about the Highstock version, so let me know about it in the next post, since this information is crucial to work on this case.

Regards!
Kamil Musiałowski
Highcharts Developer
BAhdoot
Posts: 6
Joined: Wed Nov 09, 2022 4:50 pm

Re: Mobile view of Date Picker bugged

Hello!
Sorry for the delay, but here is the fiddle with our code and a sampling of our data. We are using Highstock v10.3.1 for this chart. The issue does not arise on the demo link you provided in your last posting.

https://jsfiddle.net/njd3uszh/

Apologies again for the delay!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Mobile view of Date Picker bugged

No worries!

I was not able to reproduce the same issue in the JSFiddle that you've sent me. But I have noticed that you have a 'min-width: 50%' style on the blue dropdown select button next to the date picker. Please check if that's something that you set somewhere in the code, because that is causing the date picker issue.

Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”