question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modify time unit on zoom

See original GitHub issue

On a time scale chart, as the chart is zoomed in, the time gets more accurate, but the time axis remains as the same time display unit as when the chart was first loaded. Ideally when zooming the chart would be able to recognise the new chart limits, re-calculate the unit to use (unless it’s explicitly specified already by the options), and use that to pick a display format.

https://www.chartjs.org/docs/latest/axes/cartesian/time.html#time-units

options: {
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'month', // This should change when zoomed
        displayFormats: {
          minute: 'h:mm a',
          month: 'MMM YYYY'
        }
      }
    }]
  }
}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Techn1xcommented, Nov 22, 2018

If you need this functionality now, this could potentially be done manually in onZoom() if you have access to the chart instance to calculate the new min/max bounds yourself (note my PR that gives this access https://github.com/chartjs/chartjs-plugin-zoom/pull/178 ) and then set the new chart options then update the chart

0reactions
kurklecommented, May 24, 2021

Closing, works as expected

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using meeting timers - Zoom Support
Next to the timer, click the down arrow icon . The timer options will appear. · Select Time Remaining or Meeting Duration.
Read more >
How to set time scale zoom in ChartJS? - Stack Overflow
My goal is to set a certain time frame as default and change it's range and zoom dynamically. If there is no data...
Read more >
Time Scale | chartjs-plugin-zoom
Time Scale. Zooming is performed by clicking and selecting an area over the chart with the mouse. Pan is activated by keeping ctrl...
Read more >
Change the calendar time scale - Microsoft Support
Although the most common calendar intervals are 15 minutes and 30 minutes, you can also change the time scale interval of your calendar...
Read more >
Configure Time Scope Block - MATLAB & Simulink - MathWorks
You can change it to None to not display any units on the time axis. ... When you use the zoom options in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found