{"id":13702180,"url":"https://github.com/ipax77/pax.BlazorChartJs","last_synced_at":"2025-05-05T04:30:54.267Z","repository":{"id":65553232,"uuid":"524649392","full_name":"ipax77/pax.BlazorChartJs","owner":"ipax77","description":"Blazor ChartJs wrapper library","archived":false,"fork":false,"pushed_at":"2025-04-18T04:45:38.000Z","size":95199,"stargazers_count":32,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T17:45:44.588Z","etag":null,"topics":["blazor","chartjs","dotnet","wrapper"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ipax77.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-08-14T11:19:01.000Z","updated_at":"2025-04-18T04:44:36.000Z","dependencies_parsed_at":"2024-02-21T05:31:55.572Z","dependency_job_id":"37c9ed79-6186-47ce-8187-42ff82e94049","html_url":"https://github.com/ipax77/pax.BlazorChartJs","commit_stats":{"total_commits":90,"total_committers":3,"mean_commits":30.0,"dds":0.06666666666666665,"last_synced_commit":"084e1ba6a9cd8a881e3baecea223243e617f7c64"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipax77%2Fpax.BlazorChartJs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipax77%2Fpax.BlazorChartJs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipax77%2Fpax.BlazorChartJs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipax77%2Fpax.BlazorChartJs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipax77","download_url":"https://codeload.github.com/ipax77/pax.BlazorChartJs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252439435,"owners_count":21748005,"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":["blazor","chartjs","dotnet","wrapper"],"created_at":"2024-08-02T21:00:32.056Z","updated_at":"2025-05-05T04:30:54.261Z","avatar_url":"https://github.com/ipax77.png","language":"C#","readme":"![Nuget](https://img.shields.io/nuget/v/pax.BlazorChartJs)\n[![Playwright Tests](https://github.com/ipax77/pax.BlazorChartJs/actions/workflows/pwtests.yml/badge.svg)](https://github.com/ipax77/pax.BlazorChartJs/actions/workflows/pwtests.yml) [TestPage](https://ipax77.github.io/pax.BlazorChartJs/)\n\n# Blazor dotnet wrapper library for [ChartJs](https://github.com/chartjs/Chart.js)\n \n The following versions of ChartJs are compatible with published releases of `pax.BlazorChartJs`\n Release | ChartJs | Tests\n ---|---------------|---------------|\n \u003c= 0.5.0 | **3.9.1** | 3.9.1\n \u0026gt;= 0.5.0 | **4.x**   | 4.4.9\n \n \n## Getting started\nThis library is using [JavaScript isolation](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0#javascript-isolation-in-javascript-modules-1). JS isolation provides the following benefits:\n* Imported JS no longer pollutes the global namespace.\n* Consumers of a library and components aren't required to import the related JS.\n\n## Installation\n\n```powershell\ndotnet add package pax.BlazorChartJs\n```\n\nProgram.cs:\n```csharp\n    builder.Services.AddChartJs(options =\u003e\n    {\n        // default\n        options.ChartJsLocation = \"https://cdn.jsdelivr.net/npm/chart.js\";\n        options.ChartJsPluginDatalabelsLocation = \"https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2\";\n    });\n```\n\n## Usage\n\nSample Project [pax.BlazorChartJs.samplelib](https://github.com/ipax77/pax.BlazorChartJs/tree/master/src/pax.BlazorChartJs.samplelib) with\n[Sample Chart](https://ipax77.github.io/pax.BlazorChartJs/minchart)\n```razor\n@using pax.BlazorChartJs\n\n\u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" @onclick=\"Randomize\"\u003eRandomize\u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"chart-container w-75\"\u003e\n    \u003cChartComponent @ref=\"chartComponent\"\n                    ChartJsConfig=\"chartJsConfig\"\n                    OnEventTriggered=\"ChartEventTriggered\"\u003e\n    \u003c/ChartComponent\u003e\n\u003c/div\u003e\n\n@code {\n    ChartJsConfig chartJsConfig = null!;\n    ChartComponent? chartComponent;\n    private bool chartReady;\n\n    protected override void OnInitialized()\n    {\n        chartJsConfig = new ChartJsConfig()\n            {\n                Type = ChartType.bar,\n                Data = new ChartJsData()\n                {\n                    Labels = [\"Jan\", \"Feb\", \"Mar\"],\n                    Datasets = new List\u003cChartJsDataset\u003e()\n                    {\n                        new BarDataset()\n                        {\n                            Label = \"Dataset 1\",\n                            Data = [ 1, 2, 3 ]\n                        }\n                    }\n                }\n            };\n        base.OnInitialized();\n    }\n\n    private void ChartEventTriggered(ChartJsEvent chartJsEvent)\n    {\n        if (chartJsEvent is ChartJsInitEvent initEvent)\n        {\n            chartReady = true;\n        }\n    }\n\n    private void Randomize()\n    {\n        if (!chartReady)\n        {\n            return;\n        }\n\n        List\u003cChartJsDataset\u003e updateDatasets = [];\n        \n        foreach (var dataset in chartJsConfig.Data.Datasets)\n        {\n            if (dataset is BarDataset barDataset)\n            {\n                List\u003cobject\u003e newData = new();\n                foreach (var data in barDataset.Data)\n                {\n                    newData.Add(Random.Shared.Next(1, 10));\n                }\n                barDataset.Data = newData;\n                updateDatasets.Add(dataset);\n            }\n        }\n        chartJsConfig.UpdateDatasetsSmooth(updateDatasets);\n    }\n}\n```\n\n## Update Chart\n* To update the chart with the current ChartJsConfig call ```ChartJsConfig.ReinitializeChart()```\n* To update the chart with smooth animations there are several helper functions available, e.g.:\n    - ```ChartJsConfig.SetLabels(...)```\n    - ```ChartJsConfig.AddData(...)```\n    - ```ChartJsConfig.AddDatasetSmooth(...)```\n    - ```ChartJsConfig.SetData(...)```\n* use ```ChartJsConfig.UpdateChartOptions()``` to update the chart options, only (e.g. [StepSize](https://github.com/ipax77/pax.BlazorChartJs/blob/master/src/pax.BlazorChartJs.samplelib/StackedChartComp.razor#L106))\n\n## Chart Events\nSeveral chart events are available, by default only the Init event is fired. The others can be activated in the ChartJsConfig.Options [Sample](https://github.com/ipax77/pax.BlazorChartJs/blob/master/src/pax.BlazorChartJs.samplelib/EventsComp.razor)\n*  click\n*  hover\n*  leave\n*  progress\n*  complete\n*  resize\n\n## Supported Plugins\n* [chartjs-plugin-datalabels](https://github.com/chartjs/chartjs-plugin-datalabels)\n* [ArbitraryLines](https://www.youtube.com/watch?v=7ZZ_XfaJQbM\u0026t=379s) (YouTube)\n* Custom Plugins [Sample](https://github.com/ipax77/pax.BlazorChartJs/blob/master/src/pax.BlazorChartJs.samplelib/CustomPluginComp.razor)\n\n## ChartComponent\nSeveral chart functions are available in the ChartComponent, e.g.:\n* ```ChartComponent.ResizeChart(...)```\n* ```ChartComponent.GetChartImage(...)```\n* ```ChartComponent.ToggleDataVisibility(...)```\n\n## Contributing\n\nWe really like people helping us with the project. Nevertheless, take your time to read our contributing guidelines [here](https://github.com/ipax77/pax.BlazorChartJs/blob/master/CONTRIBUTING.md).\n\n## ChangeLog\n\n\u003cdetails open=\"open\"\u003e\u003csummary\u003ev0.8.5\u003c/summary\u003e\n\n\u003e- Microsoft.AspNetCore.Components.Web v8.0.*\n\u003e- ChartJs v4.4.5 tests\n\u003e- Test/Sample projects update to dotnet v8.0.10\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.8.4\u003c/summary\u003e\n\n\u003e- Microsoft.AspNetCore.Components.Web v8.0.8\n\u003e- ChartJs v4.4.4 tests\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.8.3\u003c/summary\u003e\n\n\u003e- Microsoft.AspNetCore.Components.Web v8.0.2\n\u003e- Added ChartJsConfig.UpdateDatasetsSmooth updates the ChartJs dataset(s), instead of replacing.\n\u003e- Added BlazorLegendBase that can be used for a [ChartJs Html Legend](https://www.chartjs.org/docs/latest/samples/legend/html.html) - [Sample][https://ipax77.github.io/pax.BlazorChartJs/htmllegendchart]\n\u003e- Added ChartComponent.GetLegendItems()\n\u003e- Added ChartComponent.IsDatasetVisible(int datasetIndex)\n\u003e- Added ChartComponent.SetDatasetPointsActive(int datasetIndex)\n\u003e- BarDataset.BarPercentage changed from int? to double?\n\u003e- Renamed Layout to ChartJsLayout (CA1724)\n\u003e- `IndexableOption` now supports Collection Expressions e.g.\n```csharp\n    BorderColor = [\"rgba(255, 99, 132, 1)\", \"rgba(54, 162, 235, 1)\"],\n    BorderWidth = [1, 2]\n```\n\u003e- ChartJs v4.4.2 Tests\n\u003e- Blazor App sample \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.8.2\u003c/summary\u003e\n\n\u003e- ChartJs v4.4.1 tests\n\u003e- Catching (more) dispose exeptions when switching from SSR to CSR (rendermode auto - AggregateException, JSDisconnectedException)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.8.1\u003c/summary\u003e\n\n\u003e- dotnet 8 **Breaking Change**\n\u003e- Added missing pie/doughnut dataset options (Cutout, Radius, Animation)\n\u003e- The `IndexableOption` now supports implicit operators, allowing a more concise syntax for initialization.\n\n**New Syntax:**\n```csharp\nBorderColor = new List\u003cstring\u003e()\n{\n    \"rgba(255, 99, 132, 1)\",\n    \"rgba(54, 162, 235, 1)\"\n},\nBorderWidth = 1\n```\n\nOld Syntax (still possible):\n```csharp\nBorderColor = new IndexableOption\u003cstring\u003e(new List\u003cstring\u003e()\n{\n    \"rgba(255, 99, 132, 1)\",\n    \"rgba(54, 162, 235, 1)\"\n}),\nBorderWidth = new IndexableOption\u003cdouble\u003e(1)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.6.3\u003c/summary\u003e\n\n\u003e- Reverted Microsoft.TypeScript.MSBuild to v5.2.2\nMicrosoft.TypeScript.MSBuild v5.3.2 not working for Blazor projects (only working for wasm)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.6.2\u003c/summary\u003e\n\n\u003e- Microsoft.AspNetCore.Components.Web upgrade to v6.0.25\n\u003e- Added missing pie/doughnut dataset options (Cutout, Radius, Animation)\n\u003e- The `IndexableOption` now supports implicit operators, allowing a more concise syntax for initialization.\n\n**New Syntax:**\n```csharp\nBorderColor = new List\u003cstring\u003e()\n{\n    \"rgba(255, 99, 132, 1)\",\n    \"rgba(54, 162, 235, 1)\"\n},\nBorderWidth = 1\n```\n\nOld Syntax (still possible):\n```csharp\nBorderColor = new IndexableOption\u003cstring\u003e(new List\u003cstring\u003e()\n{\n    \"rgba(255, 99, 132, 1)\",\n    \"rgba(54, 162, 235, 1)\"\n}),\nBorderWidth = new IndexableOption\u003cdouble\u003e(1)\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.6.1\u003c/summary\u003e\n\n\u003e- ChartJsLabelClickEvent and ChartJsLabelHoverEvent with 'nearest' DatasetLabel and DatasetIndex\n\u003e- Microsoft.AspNetCore.Components.Web upgrade to v6.0.21\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.6.0\u003c/summary\u003e\n\n\u003e- Fix typo for AngleLines in LinearRadialAxis **Breaking Change**\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.5.2\u003c/summary\u003e\n\n\u003e- Datalabels per dataset contributed by pjvinson\n\u003e- ChartJs v4.4.0 tests\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.5.1\u003c/summary\u003e\n\n\u003e- Marked ChartJsGrid border options as obsolete for v4.x - use ChartJsAxisBorder instead.\n\u003e- TimeSeriesAxis Min, Max, SuggestedMin and SuggestedMax are of type ```StringOrDoubleValue```, now.\n\u003e- Microsoft.AspNetCore.Components.Web upgrade to v6.0.16\n\u003e- ChartJs v4.3.0 tests\n\u003e- ChartJs v4.3.1 tests\n\u003e- ChartJs v4.3.3 tests\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003ev0.5.0\u003c/summary\u003e\n\n\u003e- **Breaking Changes**\n\u003e- Update to [ChartJs v4.x](https://www.chartjs.org/docs/latest/migration/v4-migration.html)\n\u003e- Removed ChartJs javascript files - defaults to cdn links, now. Use ``` options.ChartJsLocation = \"mychart.js\"``` to use a custom/local ChartJs version.\n\u003e- Removed chartjs-plugin-labels (you can still register it as [custom plugin](https://github.com/ipax77/pax.BlazorChartJs/blob/master/src/pax.BlazorChartJs.samplelib/CustomPluginComp.razor))\n\u003e- Microsoft.AspNetCore.Components.Web upgrade to v6.0.13\n\u003e- Added ScaleAxis X1 and Y1 (override ChartJsOptionsScales for other names)\n\u003e- ```ChartJsConfig.UpdateChartOptions()``` (will replace ```ChartComponent.UpdateChartOptions```)\n\u003e- ```ChartJsConfig.ReinitializeChart()``` (will replace ```ChartComponent.DrawChart```)\n\n\u003c/details\u003e\n","funding_links":[],"categories":["Integrations"],"sub_categories":["Others"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipax77%2Fpax.BlazorChartJs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipax77%2Fpax.BlazorChartJs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipax77%2Fpax.BlazorChartJs/lists"}