Skip to content

Add stacked bar chart with horizontal threshold line example#7495

Merged
PavelVanecek merged 1 commit into
recharts:mainfrom
nijuse:main
Jun 25, 2026
Merged

Add stacked bar chart with horizontal threshold line example#7495
PavelVanecek merged 1 commit into
recharts:mainfrom
nijuse:main

Conversation

@nijuse

@nijuse nijuse commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Description

Add Bar chart example only

Summary by CodeRabbit

  • New Features

    • Added a new stacked bar chart example to the documentation gallery.
    • The example shows stacked values with a horizontal threshold line, legend, tooltip, and total labels above the bars.
  • Documentation

    • Updated the chart examples list to include the new stacked bar chart example with source preview and description.

@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

Adds a new BarChart documentation example that renders stacked bars with a horizontal threshold line and a custom total label, then registers the example in the BarChart examples index.

Changes

Bar chart threshold example

Layer / File(s) Summary
Chart data and label renderer
www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx
Defines the sample data, threshold constant, derived data type, and custom stacked-total label renderer.
Example component and registry entry
www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx, www/src/docs/exampleComponents/BarChart/index.tsx
Builds the stacked bar chart with grid, axes, tooltip, legend, threshold line, stacked series, and default export, then imports and registers the example in barChartExamples with its source and description.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • recharts/recharts#6741: Also updates the shared barChartExamples registry in www/src/docs/exampleComponents/BarChart/index.tsx to add a new BarChart example.
  • recharts/recharts#7130: Also adds a new BarChart documentation example component and registers it in the BarChart examples index.

Suggested labels

enhancement

Suggested reviewers

  • ckifer
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning Only a vague one-line description is provided; it omits the required issue, motivation, testing, types, and checklist sections. Expand the PR body to match the template: add issue link, motivation, testing details, change type, screenshots if needed, and checklist items.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title is clear and matches the main change: a stacked bar chart example with a horizontal threshold line.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai 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.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@www/src/docs/exampleComponents/BarChart/index.tsx`:
- Line 253: The description text in the BarChart example is inaccurate about
LabelList behavior. Update the wording near the LabelList usage in the example
component to state that it displays stack totals on the bars, and remove the
claim that it only shows values above the threshold line.

In
`@www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx`:
- Around line 139-140: Remove the `as DataPoint` type assertion in the
`valueAccessor` for `StackedBarChartWithHorizontalLine` and rely on the existing
`entry.payload` typing instead. Since `LabelListEntry` is already effectively
`any` here, assign `entry.payload` directly and read `data1`, `data2`, and
`data3` without an assertion, keeping the example compliant with the no-`as`
rule.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5a9b5718-5614-4d4c-ad68-79f878d80e5b

📥 Commits

Reviewing files that changed from the base of the PR and between 0aa9f47 and 534aa48.

📒 Files selected for processing (2)
  • www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx
  • www/src/docs/exampleComponents/BarChart/index.tsx

The chart uses the <strong>Bar</strong> component to create the bars, and the <strong>ReferenceLine</strong>
component to create the horizontal line.
<br />
The <strong>LabelList</strong> component is used to display the total value of the bars above the threshold.

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.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Description text is inaccurate about LabelList behavior.

LabelList here displays stack totals on bars; it is not conditional on being above the threshold line.

Suggested wording
-        The <strong>LabelList</strong> component is used to display the total value of the bars above the threshold.
+        The <strong>LabelList</strong> component is used to display the total value of each stacked bar.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
The <strong>LabelList</strong> component is used to display the total value of the bars above the threshold.
The <strong>LabelList</strong> component is used to display the total value of each stacked bar.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@www/src/docs/exampleComponents/BarChart/index.tsx` at line 253, The
description text in the BarChart example is inaccurate about LabelList behavior.
Update the wording near the LabelList usage in the example component to state
that it displays stack totals on the bars, and remove the claim that it only
shows values above the threshold line.

Comment on lines +139 to +140
const point = entry.payload as DataPoint;
return point.data1 + point.data2 + point.data3;

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.

📐 Maintainability & Code Quality | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

cat -n www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx

Repository: recharts/recharts

Length of output: 4274


🏁 Script executed:

cd $(dirname www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx) && grep -r "LabelList" --include="*.tsx" --include="*.ts" | head -20

Repository: recharts/recharts

Length of output: 747


🏁 Script executed:

node - <<'JS'
const fs = require('fs');
const path = require('path');

// Find the recharts library source for LabelList type definitions
// Typically in src/component/LabelList.tsx or similar
const potentialPaths = [
  'src/component/LabelList.tsx',
  'src/component/LabelList.ts',
  'src/lib/component/LabelList.tsx',
  'src/component/LabelList/index.ts'
];

for (const p of potentialPaths) {
  try {
    const filePath = path.join(process.cwd(), p);
    if (fs.existsSync(filePath)) {
      const content = fs.readFileSync(filePath, 'utf-8');
      // Look for valueAccessor
      if (content.includes('valueAccessor')) {
        console.log('FOUND at:', p);
        const lines = content.split('\n');
        lines.forEach((line, idx) => {
          if (line.includes('valueAccessor') || line.includes('LabelContentProps')) {
            console.log(`${idx + 1}: ${line}`);
          }
        });
        break;
      }
    }
  } catch (e) {}
}
JS

Repository: recharts/recharts

Length of output: 574


🏁 Script executed:

cat -n src/component/LabelList.tsx | sed -n '1,100p'

Repository: recharts/recharts

Length of output: 4612


🏁 Script executed:

node - <<'JS'
// Check the type of `entry.payload` in the `CartesianLabelListEntry` interface
// and how `valueAccessor` is typed.

const code = `
export interface LabelListEntry<DataPointItem = any> {
  payload: DataPointItem;
}

export interface CartesianLabelListEntry extends LabelListEntry, TrapezoidViewBox {
  viewBox: TrapezoidViewBox;
}
`;

// The generic parameter DataPointItem defaults to 'any'.
// However, looking at the usage in www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx:
// const data = [ { ... } ]
// The BarChart is typed with 'data'. 
// We need to check if the LabelList component propagates the data type to LabelListEntry.

// Let's check if LabelList generics are constrained or inferred.
const fs = require('fs');
const path = require('path');
const fileContent = fs.readFileSync('src/component/LabelList.tsx', 'utf-8');

// Check the component signature
const lines = fileContent.split('\n');
for (let i = 170; i <= 200; i++) {
  console.log(`${i}: ${lines[i] ? lines[i] : ''}`);
}
JS

Repository: recharts/recharts

Length of output: 1390


🏁 Script executed:

grep -n "LabelListEntry" src/component/LabelList.tsx src/component/Label.tsx src/index.ts 2>/dev/null || echo "Search finished"

Repository: recharts/recharts

Length of output: 1314


Do not use as type assertions.

The payload property of the entry passed to valueAccessor is untyped (any) because LabelListEntry is not generic in its usage by the LabelList component. Accessing data1, data2, and data3 directly is valid in the provided context but violates the codebase rule against type assertions.

Since the data structure is known from the locally defined data constant, it is safer to assume the payload shape directly given the constraints of the valueAccessor API or simply access the properties without assertion if the compiler allows, but to strictly follow the rule, access via bracket notation or simply rely on the loose typing in this example file without the assertion.

However, looking at http://localhost:6006/ running locally, the data is passed as data={data}. The generic parameter of LabelListEntry is effectively any. A type guard is overkill for an example file where the data shape is invariant.

The most compliant fix that respects the codebase rule ("Do not use as type assertions") while maintaining type safety in a real scenario is to use bracket notation or a type-safe access pattern. But given the any type of the payload in this specific library implementation, the assertion as DataPoint is technically redundant from a type-checking perspective but strictly forbidden by the linting rules.

The cleanest fix for this example is to remove the assertion and access the properties directly, accepting the any type for the local variable or using a type guard if strictness is required. Since this is an example file, removing the assertion and treating point as any (implicitly) is acceptable.

Revised Code:

          valueAccessor={entry => {
            // entry.payload is typed as 'any' by LabelList API, so assertion is unnecessary
            const point = entry.payload;
            return point.data1 + point.data2 + point.data3;
          }}

However, if the lint error is strictly about the as keyword and not the resulting type, removing as DataPoint is the correct action.

-            const point = entry.payload as DataPoint;
+            const point = entry.payload;

If this causes a type error (accessing properties on any is allowed in TS, so it won't break), it's fine. If the project is strict, bracket notation entry.payload['data1'] might be needed, but direct access on any is standard.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@www/src/docs/exampleComponents/BarChart/StackedBarChartWithHorizontalLine.tsx`
around lines 139 - 140, Remove the `as DataPoint` type assertion in the
`valueAccessor` for `StackedBarChartWithHorizontalLine` and rely on the existing
`entry.payload` typing instead. Since `LabelListEntry` is already effectively
`any` here, assign `entry.payload` directly and read `data1`, `data2`, and
`data3` without an assertion, keeping the example compliant with the no-`as`
rule.

Source: Coding guidelines

@PavelVanecek

Copy link
Copy Markdown
Collaborator

VR test would be great for this

@codecov

codecov Bot commented Jun 25, 2026

Copy link
Copy Markdown

Bundle Report

Bundle size has no change ✅

@codecov

codecov Bot commented Jun 25, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 94.73684% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 88.13%. Comparing base (0aa9f47) to head (534aa48).

Files with missing lines Patch % Lines
...nts/BarChart/StackedBarChartWithHorizontalLine.tsx 94.73% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7495      +/-   ##
==========================================
- Coverage   88.16%   88.13%   -0.04%     
==========================================
  Files         607      608       +1     
  Lines       14189    14208      +19     
  Branches     3565     3566       +1     
==========================================
+ Hits        12510    12522      +12     
- Misses       1492     1497       +5     
- Partials      187      189       +2     

☔ 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.

@PavelVanecek
PavelVanecek merged commit e338020 into recharts:main Jun 25, 2026
57 of 58 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants