react-chartjs | common react charting components using chart.js | Chart library

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.

As in actions/checkout issue 14, you can add as a first step:

The HomePage component is still mounted and being rendered when conditionally rendering the DetailPage component, so the interval timer it instantiated is still running and never cleaned up.

A solution is to add showDetails state to the useEffect hook's dependency and clear the interval when showDetails is true, or rather, only start the interval when showDetails is false.

Example:

You need to import and register the LineController

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:

This is because chart.js v3 is treeshakable so you will need to register everyhting you are using. In your case you dont have the pointElement registered. You can do that like this:

Chart.js is treeshakable since chart.js V3 so you will need to import and register all elements you are using.

You can do this, import ChartType from chart.js like

ChartJS provides a callback that allows you to customize the contents of your tooltip. ChartJS also has many other Tooltip callbacks that come in handy for customizing the look and feel of your graphs, and react-chartjs-2, being a wrapper around ChartJS, allows the same functionality.

Add a plugins object containing tooltip configuration as below:

You can use a custom plugin: