How to implement vertical scroll for Bar Chart?
Application Type
Reactive

Hi all,

Does anyone here knows how to implement a vertical scroll for Bar Chart? It hides the name of some application names when the chart composed many data like this one in the screenshot below.


Got some help with a workaround but not as polished as I wanted, graph does not show data with 1 request count only so it's least number is always at 2 counts

This is what we used to enable scrollable x-axis btw in the HighchartsJSON property:

"xAxis: {
        type: 'category',
        min: 0,
        max: "+ (GetRequestCountByApp.List.Length - 1) +",
        scrollbar: {
            enabled: true
        },
        tickLength: 0
    },

    yAxis: {
            min: 0,
            max: "+ (GetRequestCountByApp.List.Current.Count + 9) +",
            tickLength: "+ ((GetRequestCountByApp.List.Current.Count + 9)/5) +"
    },
    
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    }"

And the resulting bar graph which dynamically changes its bars according to count of requests:

In above scenario, some labels are not showing due to the height of chart. If you increase the height you will be able to see all values. But it will not work if you have dynamic data points. Could you please help to tell if the number of data points is fix or not.

with default height 300 px : outpout is

when increased the height to 600


Hi Sir @Vikas Sharma


The data points are dynamic, it depends on the number of request per application if this is what you are asking. Thanks

Hi @Rio Alyssa Venturina 

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/yaxis/inverted-bar-scrollbar/

https://www.highcharts.com/docs/chart-concepts/scrollbar

This will help you.

you just need to enable x-axis scrollbar true in chart advance property.

Hi Sir @Apoorv choubey ,

I tried to implement it yet I can't make it work. I tried this in the advanced chart


But the bar chart reduced in size only, no scrollbar implemented. Also, the data I'm utilizing is from an aggregate.


Hi @Rio Alyssa Venturina As You Can see in screen shot my scroll bar appear in chart can you share your OML

Hi Sir @Apoorv choubey ,

Unfortunately, I cannot share with you the OML file of our app. Can you send a sample through an OML file of yours instead? 

Thank you and apologies for inconvenience.


Got some help with a workaround but not as polished as I wanted, graph does not show data with 1 request count only so it's least number is always at 2 counts

This is what we used to enable scrollable x-axis btw in the HighchartsJSON property:

"xAxis: {
        type: 'category',
        min: 0,
        max: "+ (GetRequestCountByApp.List.Length - 1) +",
        scrollbar: {
            enabled: true
        },
        tickLength: 0
    },

    yAxis: {
            min: 0,
            max: "+ (GetRequestCountByApp.List.Current.Count + 9) +",
            tickLength: "+ ((GetRequestCountByApp.List.Current.Count + 9)/5) +"
    },
    
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    }"

And the resulting bar graph which dynamically changes its bars according to count of requests:

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.