This is a migrated thread and some comments may be shown as answers.

Vertical scroll for bar chart with fixed x-axis

7 Answers 1880 Views
Charts
This is a migrated thread and some comments may be shown as answers.
rajmohan
Top achievements
Rank 1
rajmohan asked on 29 Aug 2017, 06:35 AM

Hello Kendo Team,

How do we add/enable vertical scroll to the right of the bar chart to scroll through more items in the data source.

Consider a scenario where there are 100 items to be displayed in the bar chart and bar chart is designed to display the items in the paginated fashion of 10 items in each page,

1.Bar chart will display 10 items in a given view

2.When user pans/mouse scroll the bar chart will display the next set of items in the given ahead

3. Now, there is no visual clue for the user that the bar chart can be scrolled/panned to view more items. Please suggest a way/workaround to include a vertical scrollbar which will allow user to scroll through the entire bar chart items having the x-axis anchored at the bottom.

7 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 30 Aug 2017, 01:36 PM
Hi Rajmohan,

If you wish to have a visible scroll, perhaps the Stock Chart with a navigator is a more suitable choice. Have a look at the official demo and let me know what you think.

Here is the same demo only with column series:

http://dojo.telerik.com/@bubblemaster/ufeNiD

Alternatively, if you prefer to stay with the Bar Chart, you could use the example for custom zoom and of Bar Charts and add a Kendo UI Slider and its change event to serve as the scrollbar(Kendo UI does not have a Scrollbar widget, we use the native browser ones):

http://dojo.telerik.com/@bubblemaster/UjuSA

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
answered on 08 Oct 2019, 01:55 PM

I tried going to http://dojo.telerik.com/@bubblemaster/ufeNiD as you suggest in your reply but it is blocked by CORS policy from origin runner.telerik.io. Could you post instructions on how to add the vertical scroll bar to the bar chart?

0
Alex Hajigeorgieva
Telerik team
answered on 10 Oct 2019, 11:40 AM

Hi, Lee,

Apologies for that, it was due to the relatively new https hosted Dojo and the resource being requested with http in the Dojo. Here is the updated Dojo where I replaced the http links to https and it now works as expected:

https://dojo.telerik.com/@bubblemaster/uquGafuy

Let me know in case you have further questions.

Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
jersey
Top achievements
Rank 1
answered on 21 Sep 2020, 04:12 AM

hi may i request a suggestion regarding my concern

 

i am creating a bar chart which might include bulk data like 20-30 rows or more. I want my chart to have a scrollbar and maintain the size of the bar it will generate. i want to have 10 bars to display on every page if possible or an scrollbar. 

0
jersey
Top achievements
Rank 1
answered on 21 Sep 2020, 07:21 AM

hi do you already have the solution for this ? this is also my problem 

 

0
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
answered on 21 Sep 2020, 11:14 AM
I never got a solution for this unfortunately. I keep hoping Telerik will come up with one.
0
Alex Hajigeorgieva
Telerik team
answered on 22 Sep 2020, 04:53 PM

Hi, Jersey and Lee,

We have suggested a vertical option using the same approach in one of our Feature Requests:

Vote for the feature here:

https://feedback.telerik.com/kendo-jquery-ui/1433345-add-vertical-scrollbar-to-bar-chart

Vertical scrollbar example:

https://dojo.telerik.com/EgoTOmoS/3

You may notice that the feature request is marked as completed. This is because a solution was provided and there were no further responses from the original poster or anyone else. 

If you feel that the solution is somehow lacking, please comment on the item so we can revise it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Charts
Asked by
rajmohan
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
jersey
Top achievements
Rank 1
Share this question
or