Tailwind CSS Chart Widget

AlpineJS and ChartJS with date changer and animations

/r/n <\/a>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":977,"collection_id":null,"fork_id":null,"votes":11,"score":"4.7","visits":19527,"popularity":2679,"slug":"chart-widget","approved":1,"created_at":"2021-03-04T06:16:08.000000Z","updated_at":"2024-09-19T02:55:06.000000Z","downloads":515,"code_views":6907,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":4009,"model_type":"App\\Component","model_id":1076,"collection_name":"preview","name":"temp97427","file_name":"temp97427.png","mime_type":"image\/png","disk":"public","size":56086,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp97427___media_library_original_1280_957.png","temp97427___media_library_original_1070_799.png","temp97427___media_library_original_895_669.png","temp97427___media_library_original_749_559.png","temp97427___media_library_original_627_468.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvT2dBc1FCMXIyRGlMRGFkT3FodkxPRFFLNUc5cktneXlrQ2dDS2dZK0hpVmZyUUI2THBjRnBQWm9aSkZ6anZYZFRqVHRxSlFiMUsydTJObkhaTzBicVd4MEZGU05PMmdjck9CUFUxd2pFb0FsVzdtUVlFakFmV2dBZTZsY1lhUmlQclFCcStHL0RiK0lKWFJIQzdSbm1zNVM1U2tybi8vMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":3924,"created_at":"2021-06-24T07:32:23.000000Z","updated_at":"2021-06-24T07:32:24.000000Z","conversions_disk":"public","uuid":"3e7143a2-e3da-454e-a605-631742eba6ae","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/4009\/temp97427.png","preview_url":""}],"author":{"id":977,"name":"Scott Windon","slug":"scott-windon","bio":"https:\/\/linktr.ee\/scottwindon","avatar":"\/storage\/avatars\/bdSSQtrngChUVVpfr5lHlMzUqupQfYvPWmY9wj0L.jpg","header":null,"created_at":"2020-08-04T05:42:29.000000Z","updated_at":"2021-12-10T11:11:18.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":1076,"tag_id":15}},{"id":39,"name":{"en":"Datepicker"},"description":"See below our collection of Datepickers that you can add directly to your web project.","meta_description":"Visit our Datepickers collection that you can add to your Tailwind UI project to manage events and activities.","slug":{"en":"datepicker"},"type":null,"order_column":38,"created_at":"2022-08-31T14:26:27.000000Z","updated_at":"2022-12-21T11:01:11.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":1076,"tag_id":39}},{"id":76,"name":{"en":"Charts"},"description":"Create stunning data visualizations effortlessly using Tailwind CSS Chart Components. Enhance your web apps with beautiful charts and graphs.","meta_description":"Visit our Tailwind CSS Chart component examples that you can add to your web project to create awesome web apps.","slug":{"en":"charts"},"type":null,"order_column":65,"created_at":"2023-10-16T13:57:35.000000Z","updated_at":"2023-10-16T13:57:35.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":1076,"tag_id":76}}],"fork":null,"favorites":[{"id":3356,"name":"marsch","slug":"marsch","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/179281?v=4","header":null,"created_at":"2021-05-07T17:50:56.000000Z","updated_at":"2021-05-07T17:50:56.000000Z","pivot":{"component_id":1076,"user_id":3356}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":1076,"user_id":3558}},{"id":3639,"name":"Veloz-X","slug":"veloz-x","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/52367350?v=4","header":null,"created_at":"2021-05-30T21:12:21.000000Z","updated_at":"2021-05-30T21:12:21.000000Z","pivot":{"component_id":1076,"user_id":3639}},{"id":4236,"name":"Jakub","slug":"jakub","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2b7dc5dabbe2ac87e096ac888f60a46e","header":null,"created_at":"2021-07-14T06:23:21.000000Z","updated_at":"2021-07-14T06:23:21.000000Z","pivot":{"component_id":1076,"user_id":4236}},{"id":4237,"name":"erkobridee","slug":"erkobridee","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/342471?v=4","header":null,"created_at":"2021-07-14T06:40:38.000000Z","updated_at":"2021-07-14T06:40:38.000000Z","pivot":{"component_id":1076,"user_id":4237}},{"id":3907,"name":"migues2000","slug":"migues2000","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/48232323?v=4","header":null,"created_at":"2021-06-17T12:15:12.000000Z","updated_at":"2021-06-17T12:15:12.000000Z","pivot":{"component_id":1076,"user_id":3907}},{"id":4781,"name":"zero-sigma","slug":"zero-sigma","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/17350770?v=4","header":null,"created_at":"2021-08-28T23:00:01.000000Z","updated_at":"2021-08-28T23:00:01.000000Z","pivot":{"component_id":1076,"user_id":4781}},{"id":4823,"name":"shchf3","slug":"shchf3","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/51129901?v=4","header":null,"created_at":"2021-09-01T08:48:30.000000Z","updated_at":"2021-09-01T08:48:30.000000Z","pivot":{"component_id":1076,"user_id":4823}},{"id":4829,"name":"stockime","slug":"stockime","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/192811?v=4","header":null,"created_at":"2021-09-01T15:52:30.000000Z","updated_at":"2021-09-01T15:52:30.000000Z","pivot":{"component_id":1076,"user_id":4829}},{"id":5261,"name":"eartharoid","slug":"eartharoid","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/20905071?v=4","header":null,"created_at":"2021-10-01T20:16:55.000000Z","updated_at":"2021-10-01T20:16:55.000000Z","pivot":{"component_id":1076,"user_id":5261}},{"id":5287,"name":"Nam L.","slug":"nam-l","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/18f9821cf4b0b01e7a1a8db337a4786b","header":null,"created_at":"2021-10-03T23:19:43.000000Z","updated_at":"2021-10-03T23:19:43.000000Z","pivot":{"component_id":1076,"user_id":5287}},{"id":3779,"name":"pavlentij","slug":"pavlentij","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/971128?v=4","header":null,"created_at":"2021-06-08T11:45:28.000000Z","updated_at":"2021-06-08T11:45:28.000000Z","pivot":{"component_id":1076,"user_id":3779}},{"id":5517,"name":"alphapiou","slug":"alphapiou","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a67cffc61321bac788000c2a3ea2ddba","header":null,"created_at":"2021-10-21T11:07:19.000000Z","updated_at":"2021-10-21T11:07:19.000000Z","pivot":{"component_id":1076,"user_id":5517}},{"id":5854,"name":"Thomas Garp","slug":"thomas-garp","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a94624bc5c13722490c724ac7a423997","header":null,"created_at":"2021-11-20T16:35:06.000000Z","updated_at":"2021-11-20T16:35:06.000000Z","pivot":{"component_id":1076,"user_id":5854}},{"id":5901,"name":"maltebaer","slug":"maltebaer","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/29504917?v=4","header":null,"created_at":"2021-11-24T10:34:19.000000Z","updated_at":"2021-11-24T10:34:19.000000Z","pivot":{"component_id":1076,"user_id":5901}},{"id":6113,"name":"Gusta14Dev","slug":"gusta14dev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33584132?v=4","header":null,"created_at":"2021-12-10T18:33:16.000000Z","updated_at":"2021-12-10T18:33:16.000000Z","pivot":{"component_id":1076,"user_id":6113}},{"id":6061,"name":"maurus56","slug":"maurus56","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/20258911?v=4","header":null,"created_at":"2021-12-06T13:26:02.000000Z","updated_at":"2021-12-06T13:26:02.000000Z","pivot":{"component_id":1076,"user_id":6061}},{"id":6695,"name":"Arijul Islam","slug":"arijul-islam","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/da91634e524611ff5f75e818755e9b92","header":null,"created_at":"2022-01-27T19:24:22.000000Z","updated_at":"2022-01-27T19:24:22.000000Z","pivot":{"component_id":1076,"user_id":6695}},{"id":6727,"name":"nonacc","slug":"nonacc","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/12987330?v=4","header":null,"created_at":"2022-01-30T22:26:40.000000Z","updated_at":"2022-01-30T22:26:40.000000Z","pivot":{"component_id":1076,"user_id":6727}},{"id":7590,"name":"dohwan Park","slug":"dohwan-park","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2e1099038e757aa533b18529a31c20ad","header":null,"created_at":"2022-04-20T06:17:11.000000Z","updated_at":"2022-04-20T06:17:11.000000Z","pivot":{"component_id":1076,"user_id":7590}},{"id":8508,"name":"coldSock","slug":"coldsock","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74825582?v=4","header":null,"created_at":"2022-07-26T21:27:51.000000Z","updated_at":"2022-07-26T21:27:51.000000Z","pivot":{"component_id":1076,"user_id":8508}},{"id":9041,"name":"stanig2106","slug":"stanig2106","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/65514998?v=4","header":null,"created_at":"2022-09-13T15:10:24.000000Z","updated_at":"2022-09-13T15:10:24.000000Z","pivot":{"component_id":1076,"user_id":9041}},{"id":5581,"name":"Scar","slug":"scar","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/f21dd4c7968e71385fee4aaf164dacb0","header":null,"created_at":"2021-10-26T14:12:29.000000Z","updated_at":"2021-10-26T14:12:29.000000Z","pivot":{"component_id":1076,"user_id":5581}},{"id":6569,"name":"Glicht","slug":"glicht","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/96473dc05f9454fd44314396260fb37a","header":"\/storage\/headers\/2mQDvwOW5yMRC1ZjcsCwpzaj7NjklBMIpogbRbpA.jpg","created_at":"2022-01-18T19:50:36.000000Z","updated_at":"2022-11-25T18:03:40.000000Z","pivot":{"component_id":1076,"user_id":6569}},{"id":4075,"name":"bajro17","slug":"bajro17","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/796e85a3ea9beb39317ff2b37e69fc9f","header":null,"created_at":"2021-06-30T12:35:21.000000Z","updated_at":"2023-01-28T23:48:32.000000Z","pivot":{"component_id":1076,"user_id":4075}},{"id":10044,"name":"Prem Whineray","slug":"prem-whineray","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/5254b117a13ce2967d0a05aa08af5476","header":null,"created_at":"2022-12-09T00:53:30.000000Z","updated_at":"2022-12-09T00:53:30.000000Z","pivot":{"component_id":1076,"user_id":10044}},{"id":12483,"name":"kaplun","slug":"kaplun","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/8bcd30e5d9d2b34f9a016f6b4bdf411b","header":null,"created_at":"2023-05-23T18:54:15.000000Z","updated_at":"2023-05-23T18:54:15.000000Z","pivot":{"component_id":1076,"user_id":12483}},{"id":12474,"name":"204582Huang","slug":"204582huang","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/115692633?v=4","header":null,"created_at":"2023-05-23T05:09:51.000000Z","updated_at":"2023-05-23T05:09:51.000000Z","pivot":{"component_id":1076,"user_id":12474}},{"id":12685,"name":"toxa99pk","slug":"toxa99pk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/79443265?v=4","header":null,"created_at":"2023-06-08T04:15:33.000000Z","updated_at":"2023-06-08T04:15:33.000000Z","pivot":{"component_id":1076,"user_id":12685}},{"id":6729,"name":"EL-MOURABITsaber","slug":"el-mourabitsaber","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85076651?v=4","header":null,"created_at":"2022-01-31T00:44:41.000000Z","updated_at":"2022-01-31T00:44:41.000000Z","pivot":{"component_id":1076,"user_id":6729}},{"id":14320,"name":"nishLauw","slug":"nishlauw","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74921463?v=4","header":null,"created_at":"2023-09-24T11:57:05.000000Z","updated_at":"2023-09-24T11:57:05.000000Z","pivot":{"component_id":1076,"user_id":14320}},{"id":14383,"name":"h3c70rdelAn9el","slug":"h3c70rdelan9el","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13822149?v=4","header":null,"created_at":"2023-09-27T16:00:51.000000Z","updated_at":"2023-09-27T16:00:51.000000Z","pivot":{"component_id":1076,"user_id":14383}},{"id":16413,"name":"Naqued","slug":"naqued","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5002322?v=4","header":null,"created_at":"2024-01-17T08:05:04.000000Z","updated_at":"2024-01-17T08:05:04.000000Z","pivot":{"component_id":1076,"user_id":16413}},{"id":18208,"name":"Sebastian","slug":"sebastian-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/04aeb184c05937c80dae04fa4f0ce93a","header":null,"created_at":"2024-04-13T23:57:48.000000Z","updated_at":"2024-04-13T23:57:48.000000Z","pivot":{"component_id":1076,"user_id":18208}}]}" :edit="false"> Full screen Preview