Log in to AnswerLog in to Follow
2022-04-12 03-36-46
Rio Alyssa Venturina
21Views
7Comments
Solved
How to implement vertical scroll for Bar Chart?
Question
Reactive
Charts
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.


1
0
13 Jun

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:

See solution in context
1
0
14 days ago

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


0
0
13 Jun

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

0
0
13 Jun

Replying to Rio Alyssa Venturina's comment on 13 Jun 2022 07:38:56

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.

0
0
13 Jun

Replying to Apoorv choubey's comment on 13 Jun 2022 11:16:27

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.


0
0
14 Jun

Replying to Rio Alyssa Venturina's comment on 14 Jun 2022 05:50:19

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

0
0
14 Jun

Replying to Apoorv choubey's comment on 14 Jun 2022 07:11:27

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.


0
0
14 Jun

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:

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