[FEATURE] Select a range on line/time chart

[timwis]

Expected Behavior

I would like to propose the ability to select a range of data in a line/area/time series chart.

Current Behavior

Currently you can select a single point of data.

Possible Solution

I asked how to implement a custom solution in stack overflow and Jony Adamit proposed an idea. I had some difficulty implementing it, and it doesn't work in FireFox, but may be a start.

An implementation would likely involve a cursor that follows the mouse, an overlay that appears when the mouse is held down, and an event that's fired when the mouse is released.

Context

I'm trying to rebuild VizWit, an interactive open data visualization tool, using Chart.js. I have personally tried nearly every JS charting library out there and this feature only seems to be available in giant/monolith libraries like highcharts, amcharts, plotly, and echarts. Plottable offers the functionality, but it's broken and they don't seem too active in GH issues. Chart.js is fantastic in every other way! Unfortunately I've been completely blocked on rebuilding this open source tool because of this missing feature :/

Environment

• Chart.js version: 2.7.2
• Browser name and version: Chrome 67 dev
• Link to your project: http://vizwit.io

[mzabuawala]

Hi,

Is there any updates on this thread, I'm also looking for the same.

[oliviercherrier]

I am also very interested by this feature

[sergeyglazyrindev]

We are working on one product and we also need this feature. We will implement it and then we can contribute.

[miroslav-mihalakev]

Hi,
Is there any movement?

[sergeyglazyrindev]

hello
not yet

[benmccann]

If I understand correctly, this already exists. It looks exactly like the drag functionality of the zoom plugin: https://github.com/chartjs/chartjs-plugin-zoom

(Note that we've fixed a lot of bugs in that plugin in the past couple weeks, so hopefully the next version will improve upon the currently released version)

[benmccann]

Ah, I just found a working vizwit example (most are broken). vizwit looks very similar to the zoom plugin except it doesn't zoom. It only does the selection part. Still, I imagine it should give you a pretty good idea of how to implement. The zoom plugin has a superset of the functionality, so you'd just have to remove the actual zoom call.

[timwis]

@benmccann does the zoom plugin allow you to select a range on the chart with your cursor? In the codepen demo I can only scroll to zoom.

[benmccann]

You have to set the drag option to enable it

[fabiorogeriosj]

+1

[nayadd]

+1

[dokicro]

+1

[gamoridev]

+1

[CincyBC]

If I understand correctly, this already exists. It looks exactly like the drag functionality of the zoom plugin: https://github.com/chartjs/chartjs-plugin-zoom

(Note that we've fixed a lot of bugs in that plugin in the past couple weeks, so hopefully the next version will improve upon the currently released version)

Thanks for posting. I tried the plugin, but didn't like the results. With a large dataset, when you zoom in, it gives you a pixelated view of the timeframe. I'm not a JavaScript developer by any means, but it would be nice to have the ability to "remove" the old chart and "draw" a new chart with the given time range as is discussed in this example: https://stackoverflow.com/questions/47624414/update-chart-js-with-date-range-selector

[benmccann]

@CincyBC I'm quite confused by your comment. The zoom plugin actually does redraw the chart with the given time range. Could you share an interactive example on plunker, codepen, or a similar site that shows the pixelation issue you describe? I've never seen that happen

[etimberg]

A plugin is the correct way to achieve this. Most of the selection logic could be based off of the zoom plugin except instead of zooming at the end of the mouse up handler, it would simply notify some other code of the total range selected.

See a very simplistic plugin in https://jsfiddle.net/6La1t3zu/ as an example

[fairking]

I don't like this approach, it is not intuitive for users how to use it and there is no much configuration or limits you can put on. Because of the amount of data in the chart. For example I would like to restrict the range (up to one day), and user wants to see the entire range when looking at the filtered data. I think the zoom plugin is bad and I am not going to use it.
I am looking for the following aproach: https://www.syncfusion.com/vue-ui-components/vue-range-selector

¯\_(ツ)_/¯

[kurkle]

@fairking could you share the reasons why you think the zoom plugin is bad?

[fairking]

@kurkle could you share the reasons why you think the zoom plugin is bad?

1. It requires to pull all data on the chart:
   
2. User cannot draw from particular Date/Time/Point. Starting the draw gives aproximate starting point which could be very far away from what is needed.
   
3. Let's say it is safe to pull only one day of data, so I would like to lock the window to 1 day which is impossible with zoom.
4. And if I want to move that 1-day-window back and forth, again it is not possible.
5. There must be some map of all data and then the chart shows the part of it. The map contains some useful markers and labels.
6. I can see difficulties with the zoom on mobile devices. Fingers are too big to make those drawings.
7. It's unconvenient and user unfriendly.

Few examples:
A. Please show me ALL data of the first two months: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/category.html
B. Please show me ALL data between 10Hz and 100Hz: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/log.html
C. Please show me ALL data between 23 Dec and 25 Dec: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/time.html
D. Please show me ALL data of the first summer: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/click-zoom.html

[kurkle]

@fairking thank you for through explanations!

1. It requires to pull all data on the chart:
   

I'm not sure what you mean. It does not use the data on the chart for zoom/pan, only scales. So you don't really need any data for it to work.

2. User cannot draw from particular Date/Time/Point. Starting the draw gives aproximate starting point which could be very far away from what is needed.
   

That is a good point. We could possibly add some indicators for the current position. Maybe "snap" to some unit (second, day, month etc) in time scale would be good.

3. Let's say it is safe to pull only one day of data, so I would like to lock the window to 1 day which is impossible with zoom.

I guess you are talking about a smaller chart to control the main chart? Zoom does not have that, but it should be possible to do something like that with zoom. Should create an example about that.

4. And if I want to move that 1-day-window back and forth, again it is not possible.

Pan is available on the main chart, or using API. You'd need to draw the focus rectangle though.
https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/api.html
https://www.chartjs.org/chartjs-plugin-zoom/latest/api/

5. I have the data of many years, and I simply cannot show all of them on the chart. I need a RangeSelector which allows me to chose the range I need where deffered loading is in place.
6. I can see difficulties with the zoom on mobile devices. Fingers are too big to make those drawings.

Pinch zoom is natural for mobile users, which is available.

7. It's unconvenient and user unfriendly.

Few examples: A. Please show me ALL data of the first two months: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/category.html

The category scale is really bad option for zooming.

B. Please show me ALL data between 10Hz and 100Hz: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/log.html

Its possible, but hard. Easier with drag.
https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/drag/log.html
Set mode to x to zoom only that axis.

C. Please show me ALL data between 23 Dec and 25 Dec: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/time.html

Again easier with drag, but mode: 'x' helps with wheel too.

D. Please show me ALL data of the first summer: https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/click-zoom.html

Another one with category scale. It only moves by full categories, so its jumpy. mode: 'x' makes it better, but you'll probably need to zoom + pan to find the right range.

[amenoni]

+1 for this feature request, I'm looking to implement the same functionality

[niemyjski]

This seems like this should be a first class feature

[Slion]

This video tutorial could also be the basis for such plugin. It seems such a common problem. Too bad no body has taken upon himself to implement a plugin yet.