Graphs: How to add a tick, where have come from these graphics in the video?

Hello everyone!

Recently I have seen this video and I don't know how to add to my project the features they have implemented. I think it could be helpful for everyone if anyone knows how to do so.

First, they have add a tick (small triangle) in the simple gauge but the component does not incorpore the feature, and the graphs in the lower part don't even appear in the perspective components.

Then I've seen this image in the forum and I would like to know how they have done the depth of the component...

Any help would be highly appreciate! Thank you :slight_smile:

The video looks like it’s @nader.chinichian’s work, he’s probably best to comment if he’s willing to give away his IP :wink:

Both are likely done through css via the theming functionality, or via injecting it in specific places. I would do some reading around this.

Hi
For the triangle I create my own gauge in inkscape and animate the triangle rotation in CSS in perspective. For the white gauge I play with dash offset to make it move.
The most component is done in inkscape and inject some CSS code to make them work in perspective.
The second image he simply use several nested shadow box CSS.
But the ultimate solutions for every things is to learn react and create your own modules.

3 Likes

For an excellent reference, you can check out the radar chart in exchange from genious @Travis.Cox.
A very solid example of how you can do this technique.

Hi nader,
Such a great work, congrats!
Thank you for the help, I was thinking it would be easier but surely will check the radar chart to learn how to do so.
Thanks again! :slight_smile: