Last active
June 4, 2024 10:07
-
-
Save gquittet/77dd931ebfa7b8a73f2711faee0a7292 to your computer and use it in GitHub Desktop.
tailwind gauge chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- percent to deg => Math.round(((value / 100) * 180 - 45) * 10) / 10 --> | |
<div class="relative flex aspect-[2] items-center justify-center overflow-hidden rounded-t-full bg-blue-400"> | |
<div class="absolute top-0 aspect-square w-full rotate-[calc(72deg-45deg)] bg-gradient-to-tr from-transparent from-50% to-white to-50% transition-transform duration-500"></div> | |
<div class="absolute top-1/4 flex aspect-square w-3/4 justify-center rounded-full bg-blue-100"></div> | |
<div class="absolute bottom-0 w-full truncate text-center text-[20vmax] leading-none">40%</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey there, thanks for this component! I tweaked it a bit for our use, adding an outer ring with red, orange and green zones to show the "valid" vs "invalid" range of the value being shown, also modifiable with a rotate angle.
So I would like to share my altered version in case it helps someone in the future :)
![image_2024-02-05_195908384](https://private-user-images.githubusercontent.com/89813426/302469032-8c351938-a046-46c5-9938-250f0d7e304b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjAyNzY2MDMsIm5iZiI6MTcyMDI3NjMwMywicGF0aCI6Ii84OTgxMzQyNi8zMDI0NjkwMzItOGMzNTE5MzgtYTA0Ni00NmM1LTk5MzgtMjUwZjBkN2UzMDRiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzA2VDE0MzE0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNmZmQ2MDY4ZmEyY2EzNjg4YmVlNWZjZTczMzg4YzUxOTZlMzgxNTM1NDM3NGFiZTg2ZDljYzhmYzliNTM2MTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.knj_IZVP7f0rmKcFJ2kgO0pTezEGKhKGPHSU_WZYRfs)
There:
EDIT: https://play.tailwindcss.com/HDhRoTJLM9 to try it out