{"id":13824001,"url":"https://github.com/muqeet-khan/BlazorComponents","last_synced_at":"2025-07-08T18:31:31.580Z","repository":{"id":144187282,"uuid":"127202069","full_name":"muqeet-khan/BlazorComponents","owner":"muqeet-khan","description":"Simple reusable Blazor component library","archived":false,"fork":false,"pushed_at":"2018-12-09T08:00:25.000Z","size":564,"stargazers_count":49,"open_issues_count":6,"forks_count":8,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-12T08:04:51.817Z","etag":null,"topics":["aspnetcore","blazor","components","csharp"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muqeet-khan.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-28T21:42:53.000Z","updated_at":"2025-03-23T22:09:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"94b0ccb9-b18d-4e45-986f-b90737c78fbd","html_url":"https://github.com/muqeet-khan/BlazorComponents","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/muqeet-khan/BlazorComponents","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muqeet-khan%2FBlazorComponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muqeet-khan%2FBlazorComponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muqeet-khan%2FBlazorComponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muqeet-khan%2FBlazorComponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muqeet-khan","download_url":"https://codeload.github.com/muqeet-khan/BlazorComponents/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muqeet-khan%2FBlazorComponents/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264323918,"owners_count":23590766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnetcore","blazor","components","csharp"],"created_at":"2024-08-04T09:00:52.722Z","updated_at":"2025-07-08T18:31:31.003Z","avatar_url":"https://github.com/muqeet-khan.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Components"],"readme":"## Simple Components for Blazor Projects\n\n```\nNote: Just as Blazor, this repo is also experimental.\n```\n\nIf you like the idea of this repo leave your feedback as an issue or star the repo or let me know on [@ma_khan](https://twitter.com/ma_khan)\n\nCurrently, starting with a simple [ChartJS](https://github.com/chartjs/Chart.js) implementation. \n\n\n## Prerequisites\n\nDon't know what Blazor is? Read [here](https://github.com/aspnet/Blazor)\n\nComplete all Blazor dependencies.\n\n1. Visual Studio 2017 (15.8 or later)\n2. DotNetCore 2.1 (2.1.402 or later).\n\n\n## Installation \n\n![NuGet](https://img.shields.io/nuget/v/BlazorComponents.svg) ![NuGet Pre Release](https://img.shields.io/nuget/vpre/BlazorComponents.svg)\n\n\nTo Install \n\n```\nInstall-Package BlazorComponents\n```\nor \n```\ndotnet add package BlazorComponents\n```\n\n## Usage\n\n1. In cshtml file add this:\n\n```html\n\u003cdiv class=\"row\"\u003e\n    \u003cbutton class=\"btn btn-primary\" onclick=\"@UpdateChart\"\u003eUpdate Chart \u003c/button\u003e\n\u003c/div\u003e\n\u003cChartJsBarChart ref=\"barChartJs\" Chart=\"@blazorBarChartJS\" Width=\"600\" Height=\"300\" /\u003e\n```\n\n```csharp\n@functions {\n\n    public ChartJSBarChart blazorBarChartJS { get; set; } = new ChartJSBarChart();\n    ChartJsBarChart barChartJs;\n\n    protected override void OnInit()\n    {\n\n        blazorBarChartJS = new ChartJSBarChart()\n        {\n            ChartType = \"bar\",\n            CanvasId = \"myFirstBarChart\",\n            Options = new ChartJsOptions()\n            {\n                Text = \"Sample chart from Blazor\",\n                BorderWidth = 1,\n                Display = true,\n                // Title of the chart\n                Title = new ChartJsTitle()\n                {\n                    Display = true, // Set to false for hiding the title\n                    Text = \"Title\",\n                    FontSize = 40\n                },\n                Layout = new ChartJsLayout()\n                {\n                    // add some space to the chart for better rendering                    \n                    Padding = new ChartJsPadding()\n                    {\n                        Bottom = 0,\n                        Left = 0,\n                        Right = 0,\n                        Top = 50\n                    }\n                },\n                // move the legend\n\t\t\t\tLegend = new ChartJsLegend()\n                {\n                    Position = \"top\",\n                    Display = true // set to false for hiding legend\n                },\n\t\t\t\tScales = new ChartJsScale()\n\t\t\t\t{\n\t\t\t\t\tXAxes = new List\u003cChartJsXAxes\u003e()\n                    {\n                        new ChartJsXAxes()\n                        {\n                            Ticks = new ChartJsTicks()\n                            {\n                                BeginAtZero = true,\n                                FontSize = 20                                    \n                            },\n                            Position = \"top\"\n                        }\n                    },\n\t\t\t\t\tYAxes = new List\u003cChartJsYAxes\u003e()\n                    {\n                        new ChartJsYAxes()\n                        {\n                            Ticks = new ChartJsTicks()\n                            {\n                                BeginAtZero = true,\n                                FontSize = 20,\n                                Max = 50 // set a maxmimum value for this axis\n                            }\n                        }\n                    }\n\t\t\t\t},\n\t\t\t\tPlugins = new ChartJsPlugins()\n                {                    \n                    // if you have enabled the plugin you can use these parameters, otherwise it will be ignored\n                    Datalabels = new ChartJsDataLabels()\n                    {\n                        Align = \"end\",\n                        Anchor = \"end\",\n                        Color = \"black\",\n                        Display = true,\n                        Font = new ChartJsDataLabelsFont()\n                        {\n                            Size = 20\n                        }\n                    }\n                }\n            },\n            Data = new ChartJsBarData()\n            {\n                Labels = new List\u003cstring\u003e() { \"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\" },\n                Datasets = new List\u003cChartJsBarDataset\u003e()\n                {\n                    new ChartJsBarDataset()\n                    {\n                        Label = \"# of Votes from blazor\",\n                        BackgroundColor = new List\u003cstring\u003e(){\"#cc65fe\" },\n                        BorderColor = \"#cc65fe\",\n                        PointHoverRadius = 2,\n                        Data = new List\u003cdouble\u003e(){ 19.187,12.2253,5.5,3,3,2}\n                    },\n                    new ChartJsBarDataset()\n                    {\n                        Label = \"# of Likes from blazor\",\n                        BackgroundColor = new List\u003cstring\u003e() {\n                            \"#a4cef0\",\n                            \"#3498db\",\n                            \"#95a5a6\",\n                            \"#9b59b6\",\n                            \"#f1c40f\",\n                            \"#e74c3c\",\n                            \"#34495e\" },\n                        BorderColor = \"#36a2eb\",\n                        PointHoverRadius = 2,\n                        Data = new List\u003cint\u003e(){ 30,10,15,13,13,12}.Select\u003cint,double\u003e(i=\u003e i).ToList()\n                    }\n                }\n            }\n        };\n    }\n\n    public async Task\u003cbool\u003e UpdateChart()\n    {\n        //Update existing dataset\n        blazorBarChartJS.Data.Labels.Add($\"New{DateTime.Now.Second}\");\n        var firstDataSet = blazorBarChartJS.Data.Datasets[0];\n        firstDataSet.Data.Add(DateTime.Now.Second);\n        \n        //Add new dataset\n        //blazorLineChartJS.Data.Datasets.Add(new ChartJsLineDataset()\n        //{\n        //    BackgroundColor = \"#cc65fe\",\n        //    BorderColor = \"#cc65fe\",\n        //    Label = \"# of Votes from blazor 1\",\n        //    Data = new List\u003cint\u003e {20,21,12,3,4,4},\n        //    Fill = true,\n        //    BorderWidth = 2,\n        //    PointRadius = 3,\n        //    PointBorderWidth = 1\n        //});\n\n        return true;\n    }\n}\n```\n\n2. In index.html add:\n\n```html\n    \u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"blazor-boot\"\u003e\n    \u003c/script\u003e\n```\n\n2.1. For using the data label plugin add this, too:\n\n``` html\n\t\u003cscript src=\"//cdn.jsdelivr.net/npm/chartjs-plugin-datalabels\"\u003e\u003c/script\u003e\n```\n\n3. In _ViewImports.cshtml add:\n\n```html\n    @using BlazorComponents.ChartJS\n    @using BlazorComponents.Shared\n    @addTagHelper *,BlazorComponents\n```\n\n## Sample Output\n\nBar Chart Example:\n![Barchart](barchart.png)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuqeet-khan%2FBlazorComponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuqeet-khan%2FBlazorComponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuqeet-khan%2FBlazorComponents/lists"}