Skip to content

Features/create table for chartjs version support #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mu439 merged 9 commits into from
Apr 20, 2026
Merged

Features/create table for chartjs version support #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dba3f16
Add support table for tech stack in documentation and update version …
gvreddy04 Apr 20, 2026
5b19d30
Add compatibility matrix and update loading UI in documentation
gvreddy04 Apr 20, 2026
0558f84
Remove FocusOnNavigate component from App.razor
gvreddy04 Apr 20, 2026
2086b65
Add screenshots for chart types in README
mu439 Apr 20, 2026
5c0d479
Update README to remove Combo bar/line section
mu439 Apr 20, 2026
47c75e1
Refactor button components in demo pages to use new Button styles for…
gvreddy04 Apr 20, 2026
acf3d9a
Merge branch 'features/create-table-for-chartjs-version-support' of h…
gvreddy04 Apr 20, 2026
791170a
Reorganize README sections for clarity and consistency
gvreddy04 Apr 20, 2026
1a19195
Update README to correct demo website label and reorganize supported …
gvreddy04 Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<LineChart @ref="lineChart" Width="600" />

<div class="mt-5">
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()"> Add Data </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync"> Add Data </Button>
<Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalLineChartAsync"> Horizontal Line Chart </Button>
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowVerticalLineChartAsync"> Vertical Line Chart </Button>
</div>

@code {
Expand Down
8 changes: 4 additions & 4 deletions ...Express.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<LineChart @ref="lineChart" Width="600" />

<div class="mt-5">
<button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToStart"> Alignment: start </Button>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToCenter"> Alignment: center (default) </Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToEnd"> Alignment: end </Button>
</div>

@code {
Expand All @@ -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] };
}

Expand Down
6 changes: 3 additions & 3 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<PieChart @ref="pieChart" Width="600" />

<div class="mt-5">
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
</div>

@code {
Expand Down
4 changes: 2 additions & 2 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<PieChart @ref="pieChart" Width="600" />

<div class="mt-5">
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
</div>

@code {
Expand Down
8 changes: 4 additions & 4 deletions ...press.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<PieChart @ref="pieChart" Width="600" />

<div class="mt-5">
<button class="btn btn-primary btn-sm" @onclick="PositionTopAsync"> Position: top </button>
<button class="btn btn-primary btn-sm" @onclick="PositionRightAsync"> Position: right </button>
<button class="btn btn-primary btn-sm" @onclick="PositionBottomAsync"> Position: bottom </button>
<button class="btn btn-primary btn-sm" @onclick="PositionLeftAsync"> Position: left </button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="PositionTopAsync"> Position: top </Button>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="PositionRightAsync"> Position: right </Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="PositionBottomAsync"> Position: bottom </Button>
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="PositionLeftAsync"> Position: left </Button>
</div>

@code {
Expand Down
51 changes: 50 additions & 1 deletion BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,55 @@
</SubTitleTemplate>
</PageHero>

<section class="be-release-spotlight">
<p class="be-release-kicker">Compatibility Matrix</p>
<h2 class="be-release-title">Supported Tech Stack by Release</h2>
<p class="be-release-copy">
Pick the top row for new projects. Older rows are retained for teams upgrading from previous releases.
</p>
</section>

<div class="table-container">
<table class="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th>BlazorExpress.ChartJS</th>
<th>.NET</th>
<th>Chart.js</th>
<th>chartjs-plugin-datalabels</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.2.2</td>
<td>8, 9, 10</td>
<td>4.4.1</td>
<td>2.2.0</td>
</tr>
<tr>
<td>1.1.0+</td>
<td>8</td>
<td>4.4.1</td>
<td>2.2.0</td>
</tr>
<tr>
<td>1.0.0</td>
<td>8</td>
<td>4.0.1</td>
<td>2.2.0</td>
</tr>
</tbody>
</table>
</div>

<section class="be-release-spotlight be-release-spotlight--compact">
<p class="be-release-kicker">Guides</p>
<h3 class="be-release-title">Project Setup Documentation</h3>
<p class="be-release-copy">
Choose the setup guide that matches your hosting model and runtime.
</p>
</section>

<div class="table-container">
<table class="table">
<thead>
Expand Down Expand Up @@ -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
}
36 changes: 36 additions & 0 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,42 @@
<DoYouKnow />

<StarOnGitHub />

<div class="mt-6">
<h3 class="title is-4">Supported Tech Stack</h3>
<div class="table-container">
<table class="table is-bordered is-striped is-fullwidth">
<thead>
<tr>
<th>BlazorExpress.ChartJS</th>
<th>.NET</th>
<th>Chart.js</th>
<th>chartjs-plugin-datalabels</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.2.2</td>
<td>8, 9, 10</td>
<td>4.4.1</td>
<td>2.2.0</td>
</tr>
<tr>
<td>1.1.0+</td>
<td>8</td>
<td>4.4.1</td>
<td>2.2.0</td>
</tr>
<tr>
<td>1.0.0</td>
<td>8</td>
<td>4.0.1</td>
<td>2.2.0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

@code {
Expand Down
188 changes: 188 additions & 0 deletions BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down Expand Up @@ -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);
}
}
2 changes: 1 addition & 1 deletion BlazorExpress.ChartJS.Demo.WebAssembly/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
AdditionalAssemblies="new []{ typeof(BlazorExpress.ChartJS.Demo.RCL.App).Assembly }">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazorExpress.ChartJS.Demo.RCL.MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
@* <FocusOnNavigate RouteData="@routeData" Selector="h1" /> *@
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
Expand Down
Loading
Loading