rowan.bradley
Posts: 33
Joined: Tue Oct 16, 2018 5:01 pm

Scrollable chart usable on desktop

Can I design a graph in Highcharts with a date axis on the X-axis, with a means of scrolling left and right which works on both a smartphone and a desktop browser to show a different range of dates? On the desktop I guess this means either having a horizontal scroll bar, or a scroll left arrow and the left hand end of the date axis and a scroll right arrow at the right hand end. I will also have a + and - button to zoom in and out on the date axis.

Thanks - Rowan
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Scrollable chart usable on desktop

Hi, Rowan!

This is our basic Highstock chart - are you looking for something like this? https://jsfiddle.net/gh/get/library/pur ... asic-line/

If not, could you describe more precisely your chart or send an image of it?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
rowan.bradley
Posts: 33
Joined: Tue Oct 16, 2018 5:01 pm

Re: Scrollable chart usable on desktop

Thanks for your reply.

That's pretty close.
When it says No-library (pure JS) that's not quite true is it? Doesn't this require Jquery?
I need visible and clickable points with tooltips. How do I add these? And how do I add the data to be displayed in the toolitp to the JSON file? Can I have multiple lines in the chart? I need 4 lines in my chart (4 different colours). How do I add these?

Thanks - Rowan
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Scrollable chart usable on desktop

Rowan,

You can find all the basic documentation here: https://www.highcharts.com/docs
You will find there a lot of information about tooltips, series, how to add them, modify them and more.
Also, you can find the API here: http://api.highcharts.com with all chart's options and properties.

Highcharts and Highstock don't require jQuery, you can use pure JavaScript.
Here you have an example of a chart with 4 line series and without jQuery: https://jsfiddle.net/BlackLabel/d3zm6pk0/

Let me know if you have any other-specify question ;)

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
rowan.bradley
Posts: 33
Joined: Tue Oct 16, 2018 5:01 pm

Re: Scrollable chart usable on desktop

How do I get a legend to display on this jsfiddle chart?

Thanks - Rowan
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Scrollable chart usable on desktop

Rowan,

Please don't duplicate the same questions in a few different threads. You got your answer here: https://forum.highcharts.com/highstock- ... rt-t41151/

Kind regards.
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”