Skip to content

feat(Chart): add Total/Tooltip/CategoryLabel format parameter#8256

Merged
ArgoZhang merged 2 commits into
mainfrom
dev-chart
Jul 23, 2026
Merged

feat(Chart): add Total/Tooltip/CategoryLabel format parameter#8256
ArgoZhang merged 2 commits into
mainfrom
dev-chart

Conversation

@ArgoZhang

@ArgoZhang ArgoZhang commented Jul 23, 2026

Copy link
Copy Markdown
Member

Link issues

fixes #8243
fixes #8244
fixes #8245

Summary By Copilot

Regression?

  • Yes
  • No

Risk

  • High
  • Medium
  • Low

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

Add server-side configuration options for chart label and tooltip formatting and update bar chart samples to use these options instead of custom JavaScript modules.

New Features:

  • Introduce formatter and styling options for total data labels on bar charts.
  • Add configurable tooltip title and label format options for chart tooltips.
  • Add configurable category label formatter for chart axes.

Enhancements:

  • Refactor bar chart samples to initialize formatting via ChartDataSource options rather than JSModule-based custom scripts.
  • Remove unused JavaScript module and ID-based wiring from bar chart samples to simplify configuration.

@ArgoZhang ArgoZhang self-assigned this Jul 23, 2026
@ArgoZhang ArgoZhang added the enhancement New feature or request label Jul 23, 2026

@bb-auto bb-auto Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Auto approved by bb-auto

@ArgoZhang ArgoZhang added this to the v10.8.0 milestone Jul 23, 2026
@ArgoZhang
ArgoZhang merged commit 8dd4f55 into main Jul 23, 2026
3 checks passed
@ArgoZhang
ArgoZhang deleted the dev-chart branch July 23, 2026 09:08
@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (84a4476) to head (1930abf).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #8256   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          769       769           
  Lines        34436     34436           
=========================================
  Hits         34436     34436           
Flag Coverage Δ
BB 100.00% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@sourcery-ai

sourcery-ai Bot commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Introduce server-side configuration options for chart total data labels, tooltips, and category labels, replacing JavaScript interop-based customization in the Bar chart sample with new formatter properties on ChartDataSource.Options and corresponding initialization methods.

File-Level Changes

Change Details Files
Move total data label configuration from JavaScript interop to ChartDataSource.Options with new formatter and styling properties, and update the Bar chart total label demo accordingly.
  • Remove usage of chart element Id for total data labels in the Bar.razor sample and simplify the Chart component markup.
  • Replace JS-based customTotalDataLabel implementation with OnInitTotalDataLabel returning a configured ChartDataSource instance.
  • Add TotalDataLabelFormatter, TotalDataLabelColor, TotalDataLabelBackgroundColor, TotalDataLabelBorderRadius, TotalDataLabelPadding, and TotalDataLabelFontWeight assignments in OnInitTotalDataLabel.
  • Delete the Bar.razor.js file that previously contained the customTotalDataLabel JavaScript function.
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.js
Introduce tooltip title and label formatter options on ChartDataSource.Options and wire them into a dedicated initialization path for the custom tooltip Bar chart demo.
  • Change Bar.razor custom tooltip sample to use OnInitCustomTooltip rather than inline OnInit(false) and drop Chart Id usage.
  • Implement OnInitCustomTooltip in Bar.razor.cs to reuse OnInit(false) data and set TooltipTitleFormatter and TooltipLabelFormatter.
  • Remove the JavaScript-based customTooltip logic and the override of InvokeInitAsync that invoked it.
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.js
Add a category label formatter option to ChartDataSource.Options and use it in a new initialization method for the custom category label Bar chart demo, replacing the previous JavaScript-based axis tick callback.
  • Update Bar.razor custom category label sample to call OnInitCustomCategoryLabel and no longer pass an Id or inline OnInit(false).
  • Implement OnInitCustomCategoryLabel in Bar.razor.cs to reuse OnInit(false) and set CategoryLabelFormatter.
  • Remove JavaScript customCategoryLabel implementation and associated Id properties, JSModuleAutoLoader attribute, and InvokeInitAsync override that wired them.
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs
src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.js

Assessment against linked issues

Issue Objective Addressed Explanation
#8243 Provide a Blazor-based API (e.g., via ChartDataSource options) to customize the bar chart hovering tooltip content/format without using JavaScript.
#8243 Update the bar chart samples/documentation to demonstrate tooltip customization using the new Blazor ChartDataSource parameters instead of JavaScript interop.
#8244 Provide a way, via Blazor's ChartDataSource API, to customize the category labels (text below each bar) for bar charts, without using JavaScript.
#8244 Update the bar chart sample/documentation to demonstrate custom category labels using ChartDataSource and remove the previous JavaScript-based implementation.
#8245 Add a configuration option (e.g., boolean parameter) to stacked bar charts to show a total value above each bar.
#8245 Implement the total-above-bar behavior using Blazor's ChartDataSource (server-side C#) instead of custom JavaScript.
#8245 Update the bar chart sample/documentation to demonstrate using the new total data label option on stacked bar charts.

Possibly linked issues

  • #: The PR implements tooltip customization using ChartDataSource options, removing JS-based configuration as requested in the issue.
  • #unknown: PR adds ChartDataSource-based total data labels for stacked bars, fulfilling the requested non-JavaScript implementation.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs" line_range="267-269" />
<code_context>
         return Task.FromResult(ds);
     }

+    private Task<ChartDataSource> OnInitCustomTooltip()
+    {
+        var ds = OnInit(false).Result;
+        ds.Options.TooltipTitleFormatter = "Day {label}";
+        ds.Options.TooltipLabelFormatter = " {datasetLabel}: {value} units";
</code_context>
<issue_to_address>
**issue (bug_risk):** Avoid blocking on the async OnInit(false) call with .Result inside OnInitCustomTooltip.

Blocking on `OnInit(false).Result` in a Blazor component can cause deadlocks and thread-pool exhaustion, and complicates async control flow. Make `OnInitCustomTooltip` async, use `await OnInit(false)`, and return `Task<ChartDataSource>` via async/await instead of `Task.FromResult` to keep the method fully asynchronous.
</issue_to_address>

### Comment 2
<location path="src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs" line_range="275-269" />
<code_context>
+        return Task.FromResult(ds);
+    }
+
+    private Task<ChartDataSource> OnInitCustomCategoryLabel()
+    {
+        var ds = OnInit(false).Result;
+        ds.Options.CategoryLabelFormatter = "Day {label}";
+        return Task.FromResult(ds);
</code_context>
<issue_to_address>
**issue (bug_risk):** OnInitCustomCategoryLabel should also avoid using .Result on the async OnInit(false) method.

This method also blocks synchronously on `OnInit(false).Result`. Please update it to be fully async (e.g., `private async Task<ChartDataSource> OnInitCustomCategoryLabel() { var ds = await OnInit(false); ... }`) to avoid potential deadlocks and keep it consistent with the rest of the async code.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +267 to +269
private Task<ChartDataSource> OnInitCustomTooltip()
{
var ds = OnInit(false).Result;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Avoid blocking on the async OnInit(false) call with .Result inside OnInitCustomTooltip.

Blocking on OnInit(false).Result in a Blazor component can cause deadlocks and thread-pool exhaustion, and complicates async control flow. Make OnInitCustomTooltip async, use await OnInit(false), and return Task<ChartDataSource> via async/await instead of Task.FromResult to keep the method fully asynchronous.


private Task<ChartDataSource> OnInitCustomTooltip()
{
var ds = OnInit(false).Result;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): OnInitCustomCategoryLabel should also avoid using .Result on the async OnInit(false) method.

This method also blocks synchronously on OnInit(false).Result. Please update it to be fully async (e.g., private async Task<ChartDataSource> OnInitCustomCategoryLabel() { var ds = await OnInit(false); ... }) to avoid potential deadlocks and keep it consistent with the rest of the async code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(Bar Chart): Show Total above each bar in stacked bar chart feat(Bar Chart): Custom Category Labels feat(Bar Chart): Edit Hovering Tooltip

1 participant