diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor index f56da685..48eea9ba 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor @@ -1,11 +1,11 @@ 
- - - - - + + + + +
@code { diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor index 27bcd3ba..1415f006 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor @@ -1,9 +1,9 @@ 
- - - + + +
@code { @@ -22,7 +22,7 @@ lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; // set ticks color - lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = "red" }; + lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[0] }; lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[4] }; } diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor index d9ee2660..6ab59423 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor @@ -1,9 +1,9 @@ 
- - - + + +
@code { diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor index 9d63948e..4bb5d026 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor @@ -1,8 +1,8 @@ 
- - + +
@code { diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor index c9feb03b..aabf594d 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor @@ -1,10 +1,10 @@ 
- - - - + + + +
@code { diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor index 6383259e..75bad854 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor @@ -10,6 +10,55 @@ +
+

Compatibility Matrix

+

Supported Tech Stack by Release

+

+ Pick the top row for new projects. Older rows are retained for teams upgrading from previous releases. +

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BlazorExpress.ChartJS.NETChart.jschartjs-plugin-datalabels
1.2.28, 9, 104.4.12.2.0
1.1.0+84.4.12.2.0
1.0.084.0.12.2.0
+
+ +
+

Guides

+

Project Setup Documentation

+

+ Choose the setup guide that matches your hosting model and runtime. +

+
+
@@ -54,7 +103,7 @@ private const string pageUrl2 = DemoRouteConstants.Docs_Prefix; private const string pageTitle = "Getting started with BlazorExpress.ChartJS"; private const string pageDescription = "Explore practical Blazor ChartJS demos with step-by-step examples. Learn how to create interactive charts in your Blazor projects."; - private const string metaTitle = "Blazor ChartJS Demo – Getting Started with Interactive Chart Examples"; + private const string metaTitle = "Blazor ChartJS Demo � Getting Started with Interactive Chart Examples"; private const string metaDescription = "Explore practical Blazor ChartJS demos with step-by-step examples. Learn how to create interactive charts in your Blazor projects."; private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo } diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor index 1487c238..3e4b8fe9 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor @@ -39,6 +39,42 @@ + +
+

Supported Tech Stack

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BlazorExpress.ChartJS.NETChart.jschartjs-plugin-datalabels
1.2.28, 9, 104.4.12.2.0
1.1.0+84.4.12.2.0
1.0.084.0.12.2.0
+
+ @code { diff --git a/BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css b/BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css index 728a4d43..c44a14ba 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css +++ b/BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css @@ -8,6 +8,10 @@ --be-bulma-accent-rgb: 255, 228, 132; --be-bulma-violet-rgb: 112.520718, 44.062154, 249.437846; --be-bulma-pink-rgb: 214, 51, 132; + --be-premium-ink: #0f172a; + --be-premium-mint: #0ea5a4; + --be-premium-gold: #f59e0b; + --be-premium-canvas: #f7fafc; } [data-theme=light] { @@ -121,3 +125,187 @@ h1:focus-visible { margin-top: .75rem; color: var(--bs-body-color) !important } + +.be-loader-shell { + min-height: 100vh; + display: grid; + place-items: center; + padding: 1.5rem; + background: radial-gradient(circle at 10% 15%, rgba(14, 165, 164, 0.16), transparent 36%), radial-gradient(circle at 85% 12%, rgba(245, 158, 11, 0.2), transparent 30%), linear-gradient(160deg, #f8fafc 0%, #e7eef8 55%, #f8fafc 100%); +} + +.be-loader-card { + width: min(420px, 92vw); + border: 1px solid rgba(15, 23, 42, 0.09); + border-radius: 1.1rem; + background: rgba(255, 255, 255, 0.75); + box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14); + backdrop-filter: blur(10px); + text-align: center; + padding: 2rem 1.5rem; +} + +.be-loader-ring { + width: 62px; + height: 62px; + margin: 0 auto 1rem auto; + border: 3px solid rgba(15, 23, 42, 0.12); + border-top-color: var(--be-premium-mint); + border-right-color: var(--be-premium-gold); + border-radius: 50%; + animation: be-loader-spin 1s linear infinite; +} + +.be-loader-orbit { + display: none; +} + +.be-loader-logo { + filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22)); + margin-bottom: 0.8rem; +} + +.be-loader-title { + font-family: "Sora", "Segoe UI", sans-serif; + font-size: 1.15rem; + font-weight: 700; + letter-spacing: 0.01em; + color: var(--be-premium-ink); +} + +.be-loader-subtitle { + font-family: "IBM Plex Sans", "Segoe UI", sans-serif; + margin-top: 0.35rem; + color: #344054; + font-size: 0.96rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.be-loader-inline-spinner { + width: 0.9rem; + height: 0.9rem; + border-radius: 50%; + border: 2px solid rgba(15, 23, 42, 0.2); + border-top-color: var(--be-premium-mint); + border-right-color: var(--be-premium-gold); + animation: be-loader-spin 0.9s linear infinite; +} + +.be-loader-shell--option-b { + background: radial-gradient(circle at 14% 18%, rgba(14, 165, 164, 0.2), transparent 34%), radial-gradient(circle at 86% 14%, rgba(245, 158, 11, 0.25), transparent 35%), linear-gradient(150deg, #f4f8ff 0%, #e6eefb 50%, #f8fbff 100%); +} + +.be-loader-card--option-b { + position: relative; + border-color: rgba(15, 23, 42, 0.11); + box-shadow: 0 26px 70px rgba(2, 6, 23, 0.17); + overflow: hidden; +} + +.be-loader-card--option-b::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(120deg, rgba(14, 165, 164, 0.08), rgba(245, 158, 11, 0.08)); + pointer-events: none; +} + +.be-loader-card--option-b .be-loader-ring { + display: none; +} + +.be-loader-card--option-b .be-loader-orbit { + width: 122px; + height: 122px; + margin: 0 auto 0.95rem auto; + display: grid; + place-items: center; + position: relative; + border-radius: 50%; + border: 1px solid rgba(15, 23, 42, 0.12); + animation: be-loader-orbit 7s linear infinite; +} + +.be-loader-card--option-b .be-loader-logo { + margin-bottom: 0; +} + +.be-loader-dot { + position: absolute; + width: 11px; + height: 11px; + border-radius: 50%; + box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65); +} + +.be-loader-dot--a { + top: 6px; + left: 50%; + transform: translateX(-50%); + background: #0ea5a4; +} + +.be-loader-dot--b { + bottom: 14px; + left: 14px; + background: #f59e0b; +} + +.be-loader-dot--c { + bottom: 14px; + right: 14px; + background: #2563eb; +} + +.be-release-spotlight { + margin: 0.25rem 0 1rem 0; + padding: 1.1rem 1rem; + border: 1px solid rgba(15, 23, 42, 0.08); + border-radius: 0.9rem; + background: linear-gradient(125deg, rgba(255, 255, 255, 0.95), rgba(246, 252, 255, 0.95)); +} + +.be-release-spotlight--compact { + margin-top: 1.4rem; +} + +.be-release-kicker { + margin: 0; + font-family: "IBM Plex Sans", "Segoe UI", sans-serif; + font-size: 0.78rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #0f766e; + font-weight: 600; +} + +.be-release-title { + margin: 0.3rem 0 0.4rem 0; + font-family: "Sora", "Segoe UI", sans-serif; + color: #111827; + font-size: clamp(1.05rem, 1.6vw, 1.28rem); +} + +.be-release-copy { + margin: 0; + color: #334155; + line-height: 1.5; +} + +@keyframes be-loader-spin { + to { + transform: rotate(360deg); + } +} + +@keyframes be-loader-orbit { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} diff --git a/BlazorExpress.ChartJS.Demo.WebAssembly/App.razor b/BlazorExpress.ChartJS.Demo.WebAssembly/App.razor index 0141386a..39d6b2ff 100644 --- a/BlazorExpress.ChartJS.Demo.WebAssembly/App.razor +++ b/BlazorExpress.ChartJS.Demo.WebAssembly/App.razor @@ -2,7 +2,7 @@ AdditionalAssemblies="new []{ typeof(BlazorExpress.ChartJS.Demo.RCL.App).Assembly }"> - + @* *@ Not found diff --git a/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/appsettings.json b/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/appsettings.json index fe12a2c3..71dc0448 100644 --- a/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/appsettings.json +++ b/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/appsettings.json @@ -1,7 +1,7 @@ { - "version": "1.2.1", + "version": "1.2.2", "release": { - "short_description": "Adds BarChart styling, LineChart features, and improved docs." + "short_description": "Adds combo bar/line charts and updates installation snippets to v1.2.2." }, "NugetPackageName": "BlazorExpress.ChartJS", "NugetPackageDisplayName": "BlazorExpress ChartJS", @@ -20,5 +20,5 @@ "github_discussions": "//github.com/BlazorExpress/BlazorExpress.ChartJS/discussions", "stackoverflow": "//stackoverflow.com/questions/tagged/blazorexpress-chartjs" }, - "dotNetVersion": "10.0.0" + "dotNetVersion": "9.0.0" } \ No newline at end of file diff --git a/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/index.html b/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/index.html index 07c94922..9a54a587 100644 --- a/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/index.html +++ b/BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/index.html @@ -28,6 +28,7 @@ + @@ -46,10 +47,14 @@
-
-
- Blazor Bootstrap - The BlazorExpress.ChartJs component library is a production-ready library built with Blazor and the Chart.js JavaScript library. -
Loading...
+
+
+ +
BlazorExpress.ChartJS
+
+ + Loading premium chart demos... +
diff --git a/README.md b/README.md index f3dcf5db..2e843b47 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,15 @@ Get started any way you want ## Online Demos -- [Demo Website](https://chartjs.blazorexpress.com) +- [Demos Website](https://chartjs.blazorexpress.com) + +## Supported Tech Stack + +| BlazorExpress.ChartJS | .NET | Chart.js | chartjs-plugin-datalabels | +|:--|:--|:--|:--| +| 1.2.2 | 8, 9, 10 | 4.4.1 | 2.2.0 | +| 1.1.0+ | 8 | 4.4.1 | 2.2.0 | +| 1.0.0 | 8 | 4.0.1 | 2.2.0 | ## Components @@ -49,48 +57,43 @@ Get started any way you want | Charts: Radar chart | [Demos](https://chartjs.blazorexpress.com/demos/radar-chart) | [Docs](https://chartjs.blazorexpress.com/docs/radar-chart) | | Charts: Scatter chart | [Demos](https://chartjs.blazorexpress.com/demos/scatter-chart) | [Docs](https://chartjs.blazorexpress.com/docs/scatter-chart) | -## Combo bar/line - -`BarChart` and `LineChart` both support mixed bar/line datasets. Add `BarChartDataset` and `LineChartDataset` instances to the same `ChartData.Datasets` collection and initialize either chart component as the root chart. - -```razor - - -@code { - private BarChart chart = default!; - private readonly BarChartOptions options = new() - { - Responsive = true, - Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false }, - }; - - private readonly ChartData chartData = new() - { - Labels = new List { "January", "February", "March" }, - Datasets = new List - { - new BarChartDataset - { - Label = "Revenue", - Data = new List { 65, 59, 80 }, - }, - new LineChartDataset - { - Label = "Target", - Data = new List { 50, 55, 60 }, - }, - }, - }; - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await chart.InitializeAsync(chartData, options); - } -} -``` - -Use `LineChart` the same way when you want the line configuration to be the root chart type. +## Screenshots + +### Bar chart + +image + +image + +### Bubble Chart + +image + +### Doughnut Chart + +image + +### Line Chart + +image + +image + +### Pie Chart + +image + +### PolarArea Chart + +image + +### Radar Chart + +image + +### Scatter Chart + +image More components coming... diff --git a/nuget/README.md b/nuget/README.md index 67171407..5c04179b 100644 --- a/nuget/README.md +++ b/nuget/README.md @@ -19,7 +19,15 @@ Get started any way you want ## Online Demos -- [Demo Website](https://chartjs.blazorexpress.com) +- [Demos Website](https://chartjs.blazorexpress.com) + +## Supported Tech Stack + +| BlazorExpress.ChartJS | .NET | Chart.js | chartjs-plugin-datalabels | +|:--|:--|:--|:--| +| 1.2.2 | 8, 9, 10 | 4.4.1 | 2.2.0 | +| 1.1.0+ | 8 | 4.4.1 | 2.2.0 | +| 1.0.0 | 8 | 4.0.1 | 2.2.0 | ## Components