react-charts | ️ Simple , immersive & interactive charts for React | Data Visualization library

Please check Have you missed this labels in data section as per above image?

You are defining the x axis scale as an array , this is v2 syntax. All scales have to be defined as an object. So at the moment chart.js sees your scale as a category scale instead of a time scale and it cant handle number inputs as labels.

To fix this you will need to change your scale like so:

A couple of notes:

• The conversion to Class Component was more complicated because the React Charts author seems to use and create hooks in a non-standard way. Either they are a genius or they are abusing the the hook system to use it as a glorified computational cache. Or both.
• The whole React ecosystem is moving to Function Components. Maybe you have a very valid reason to use Class Components (interop with legacy code, I guess?), but if you're only sticking with Class Components simply because that's how you learned React, I strongly suggest that you bite the bullet and run through the Hooks/Function Component sections of the docs. Shouldn't take you long to learn, it will make your life easier, and you will have to do it eventually anyway.

First, start from the example code in the repo, not the snippet on that page, which already fails to compile.

Next, convert the Function Components one by one and verify each step of the way before you add your own code. I've uploaded my changes to a branch here.

The two custom hooks useLagRadar() and useDemoConfig() used by the example proved to be far too much effort to convert into Class Components, so I simply added them to a Higher-Order Component. To do this, I renamed the MyChart class to MyChartInner and made a new Function Component HOC called MyChart which uses the hooks mentioned above.

You can do like this

This is not possible in chart.js by default, you can achieve this in 2 ways, you can write a custom inline plugin to draw it on the canvas or you can use 2 extra datasets and filter out the legend

Extra datasets example:

You can do something like this.

i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder

After some trial and error, adding a conditional statement before rendering gives the expected outcome.

The momentary flashing is likely due to the fact that the chart data is empty on first render. So depending on the time it take for your useEffect to fetch the data, that flashing may present a real problem.

One common solution is to use a state variable to indicate that the data is being loaded and either not display anything in place of the chart or display a loaded of some sort. So you can add something like you suggested in the comments const [ loader, setLoader ] = useState(true). Then once the data is loaded, togged it to false.

Meanwhile, inside your render function, you would do: