rajkiran
Posts: 2
Joined: Mon Jan 30, 2023 6:42 am

Horizontal scrollbar removes Y axis in column chart

Hi, I am using highcharts in react js application and when I enable horizontal scroll, it removes the Y axis. I tried few solutions in the forum but no luck. Can you please help me on this.

Code: Select all

Highcharts.chart('chart-name', {
                chart:{
                    height:185,
                    type: 'column',
                    scrollablePlotArea: {
                        minWidth: 1200,
                        scrollPositionX: 1
                    },                    
                },
                title: {
                    text: ""
                },
                xAxis: { categories: this.state.category },
                yAxis: [{
                            min: 0,
                            title: {
                                text: 'Alerts',
                                style: {
                                    color: '#1A60A9'
                                }
                            },
                            labels: {
                                style: {
                                    color: '#1A60A9'
                                }
                            }
                        }, {
                            title: {
                                text: 'Hours',
                                style: {
                                    color: '#4DA343'
                                }
                            },
                            labels: {
                                style: {
                                    color: '#4DA343'
                                }
                            },
                            opposite: true
                        }],
                tooltip: {
                    headerFormat: '<span style="font-size:10px;">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y}</b></td></tr>',
                    footerFormat: '</table>',
                    backgroundColor: 'white',
                    style:{
                        color:'black'
                    },
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0,
                        groupPadding: 0.2, 
                        pointWidth: 20,
                    }
                },
                legend: false,
                series: dataValue,
                credits: false,
            });
        }
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Horizontal scrollbar removes Y axis in column chart

Hello,

Welcome to our forum and thanks for contacting us with your question!

Could you present your problem in the form of a demo, e.g. in jsfiddle, or in codesandbox? I'm trying to reproduce it, but everything seems to work for me.

Demo: https://jsfiddle.net/BlackLabel/d3fsb6qu/

I'm waiting for your reply
Best regards!
Dawid Draguła
Highcharts Developer
rajkiran
Posts: 2
Joined: Mon Jan 30, 2023 6:42 am

Re: Horizontal scrollbar removes Y axis in column chart

Hi, Thank you for the response. will provide you with an update
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Horizontal scrollbar removes Y axis in column chart

You're welcome!

Ok, I'll wait for the update then!
Regards
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”