chartjs-plugin-zoom | Zoom and pan plugin for Chart.js | Plugin library

by chartjs JavaScript Version: 2.0.1 License: MIT

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | chartjs-plugin-zoom Summary

chartjs-plugin-zoom is a JavaScript library typically used in Plugin, jQuery, D3 applications. chartjs-plugin-zoom has no vulnerabilities, it has a Permissive License and it has low support. However chartjs-plugin-zoom has 1 bugs. You can install using 'npm i velo3d-chartjs-plugin-zoom' or download it from GitHub, npm.

A zoom and pan plugin for Chart.js >= 3.0.0. For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be done via the mouse or with a finger. Zooming is done via the mouse wheel or via a pinch gesture. Hammer.js is used for gesture recognition.

Support

Quality

Security

License

Reuse

Support

chartjs-plugin-zoom has a low active ecosystem.

It has 528 star(s) with 318 fork(s). There are 20 watchers for this library.

It had no major release in the last 12 months.

There are 50 open issues and 372 have been closed. On average issues are closed in 162 days. There are 1 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of chartjs-plugin-zoom is 2.0.1

Quality

chartjs-plugin-zoom has 1 bugs (0 blocker, 0 critical, 1 major, 0 minor) and 0 code smells.

Security

chartjs-plugin-zoom has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

chartjs-plugin-zoom code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

chartjs-plugin-zoom is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

chartjs-plugin-zoom releases are available to install and integrate.

Deployable package is available in npm.

It has 122 lines of code, 0 functions and 33 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed chartjs-plugin-zoom and discovered the below as its top functions. This is intended to give you an instant insight into chartjs-plugin-zoom implemented functionality, and help decide if they suit your requirements.

Updates the range
Creates drag and drag coordinates .
Handler for the mouseup event .
Initialize a Hammer .
Wheel wheel intercept
Zooms the given amount .
Respond to the wheel event .
Generate random numbers .
Pan and pan scale
Update scale zoom values

Get all kandi verified functions for this library.

chartjs-plugin-zoom Key Features

No Key Features are available at this moment for chartjs-plugin-zoom.

chartjs-plugin-zoom Examples and Code Snippets

No Code Snippets are available at this moment for chartjs-plugin-zoom.

Community Discussions

Trending Discussions on chartjs-plugin-zoom

./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'

Chartjs with zoom plugin zooms too much with wheel just with single turn

How to create responsive table with relative size and scroll

onZoom not triggered when zooming

Chart.js zoom shows decimal points

chart.js labels text font size and digits text font size too small

How to include adapters and plugins with ChartJS

Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)

chartjs-plugin-zoom not working with my React project

ChartJS - rolling twenty minute view

QUESTION

./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'

Asked 2022-Mar-17 at 11:24

I am trying to use Chart.js zoom in react and I keep getting this error. Here are my dependencies

...

ANSWER

Answered 2022-Mar-17 at 11:24

As described in the readme of the zoom plugin you need to use version 0.7.7 if you want to use it together with Chart.js V2. If you want to use the latest version of zoom you will need to update Chart.js to V3 but this has a lot of major breaking changes

For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin.

To install a specific version of a lib you can specify it after it like so:

Source https://stackoverflow.com/questions/71510917

QUESTION

Chartjs with zoom plugin zooms too much with wheel just with single turn

Asked 2022-Mar-14 at 12:49

I have a dummy webpage with a chart, but when i scroll my wheel the slightest I zoom all the way in. How can i limit the amount of zooming in. I tried using limit options in plugins->zoom but it zoomed in again all the way in and couldnt zoom out after that. I use chartjs version 3.7.1, zoom plugin version 1.2.0 and trying this on chrome and edge browsers.

...

ANSWER

Answered 2022-Mar-14 at 12:49

This is because of your limits you set and the scroll speed. In your limits you told the x to go to max 10 and you made the scroll speed 10 times the default. Setting this to the default and removing the verry aggresive limit on the x axis it works fine:

Source https://stackoverflow.com/questions/71460832

QUESTION

How to create responsive table with relative size and scroll

Asked 2021-Nov-23 at 03:02

I have the index list working as intended but I still have problems with the table and footer.

Known problems:

table header doesn't stay fixed when I scroll
table height is not responsive and overflows into the footer
table x scroll bar is at the bottom of the page and is not at the bottom of the table view. Intended functionality is the same as the code snippets on this site.
footer margin is not enforced on mobile.
footer height causing large white space at the bottom of the div. Most likely due to height property resizing the div.

Below is the intended design.

...

ANSWER

Answered 2021-Nov-23 at 03:02

Have managed to solve all bugs by changing the CSS file except for the table header being sticky.

Here's the code for it

Source https://stackoverflow.com/questions/70073130

QUESTION

onZoom not triggered when zooming

Asked 2021-Nov-08 at 00:37

I have made a line chart using react-chartjs-2 with a plugin called chartjs-plugin-zoom. I want to display the zoom level in console when zooming the chart. However, the onZoom seems not being triggered or called when zooming as I can't see any updates in the console panel. Would like to ask whether my syntax for onZoom is wrong and how can I fix that?

online example

https://codesandbox.io/s/musing-frost-m6fuz?file=/src/App.js

...

ANSWER

Answered 2021-Nov-07 at 14:59

This is because you putted the onZoom callback in the wrong place in the options object. You putted it at the root of the zoom plugin config while it has to be configured in the zoom part so in this namespace: options.plugins.zoom.zoom.onZoom

https://codesandbox.io/s/happy-forest-9mtii?file=/src/App.js

Source https://stackoverflow.com/questions/69873451

QUESTION

Chart.js zoom shows decimal points

Asked 2021-Oct-13 at 05:46

I have implemented graphs using Chart.js and zoom feature using chartjs-plugin-zoom which works fine. However, while scrolling the y-axes is giving a large range of decimal points which is resulting in the values being out of viewpoint. How do I avoid the decimal points?

Without Zoom:

When Zoomed:

chartjs-plugin-zoom code:

...

ANSWER

Answered 2021-Oct-13 at 05:46

From https://github.com/chartjs/chartjs-plugin-zoom/issues/220#issuecomment-507543826

Source https://stackoverflow.com/questions/69549834

QUESTION

chart.js labels text font size and digits text font size too small

Asked 2021-Oct-11 at 20:05

I would like to increase the size of the following elements. Could you please edit the code below to make these elements bigger:

the label text size (the NaCl and SalinityDrift boxes above the chart)
the numbers themselves in x,y,y2 axes

Script:

...

ANSWER

Answered 2021-Oct-11 at 20:05

You are putting the ticks config in the scale title while its supposed to be on the root of the scale itself. Also for the boxes font size on top you need to configure it in the options.plugins.legend.labels namespace.

Live example:

Source https://stackoverflow.com/questions/69531700

QUESTION

How to include adapters and plugins with ChartJS

Asked 2021-Aug-01 at 10:59

What is the most up to date (ES6) and minimal way to use Chart.js with time series data (requiring an adapter like moment.js) and zoom/pan capabilities (chartjs-plugin-zoom) using only CDN? Do you have to use require or import?

The code below will throw errors relating to missing functions that are coming from the other adapters and plugins.

...

ANSWER

Answered 2021-Aug-01 at 10:59

As stated in the documentation and migration guide since chart.js version 3 you will need to include a date adapter yourself.

Example:

Source https://stackoverflow.com/questions/68608799

QUESTION

Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)

Asked 2021-Jul-05 at 21:37

Sorry for my bad english.

After updating chart.js from 2.8.0 to 3.4.1 I saw strange "paddings" (left and right) at chart area (please look a screenshot).

On official website in Samples, you can see line charts without any paddings. But I saw it in sample of bar charts (may be some settings of bar chart can take effect?).

Here is the code of chart configuration, chart instantiation, plugins and template with styles:

...

ANSWER

Answered 2021-Jul-05 at 21:37

This behaviour comes from the offset options, this option is in the scale so bars dont render on the gridLines but they show nicely between them. As the documentation states bar charts automatically set this option to true while by default it is false:https://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-cartesian-axes

You can manually override this to be false but then the first and last bar in that chart will look weird since they get rendered at half width:

Source https://stackoverflow.com/questions/68261323

QUESTION

chartjs-plugin-zoom not working with my React project

Asked 2021-Jun-10 at 07:25

I have a react component using the 'react-chartjs-2' library to show some data. The chart with the data works fine. What I cannot do is make the chart work with the 'chartjs-plugin-zoom' plugin. I am not sure what is wrong with the config. I am using:

"react-chartjs-2": "^3.0.3"

"chartjs-plugin-zoom": "^1.0.1"

...

ANSWER

Answered 2021-Jun-10 at 07:25

2 things, you will have to register the zoomplugin as stated in the documentation by registering it either globally or inline (https://www.chartjs.org/chartjs-plugin-zoom/guide/integration.html#bundlers-webpack-rollup-etc), also your config was incorrect, the zoom option does not have an enabled option, you will have to enable all the different zoom types appart, then it will work (https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#zoom-options)

Source https://stackoverflow.com/questions/67913985

QUESTION

ChartJS - rolling twenty minute view

Asked 2021-Apr-14 at 13:52

Code below,

is there a way to get 'realtime' with a rolling twenty minute view? can't seem to find anything in the options that enables this.

ChartJS version 2.9.4

...

ANSWER

Answered 2021-Apr-14 at 13:52

duration property would help you to restrict view to a specific time limit. It accepts time in millisecods and for 20 minutes view you can configure it like below.

For more details, check plugin Configuration

Source https://stackoverflow.com/questions/67051745

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install chartjs-plugin-zoom

You can install using 'npm i velo3d-chartjs-plugin-zoom' or download it from GitHub, npm.

Support

You can find documentation for chartjs-plugin-zoom at www.chartjs.org/chartjs-plugin-zoom. Prior to v0.4.0, this plugin was known as 'Chart.Zoom.js'. Old versions are still available on npm under that name.

Find more information at: