Percentage Bar Chart
Enter your data categories and their values to create a 100% stacked horizontal bar showing proportional composition.
Reviewed by the ToolNestr Editorial Team — July 2026
Enter your data above and click Generate to see the percentage bar chart.
Composition visualization types
Different chart types show part-to-whole composition in different ways. Compare them below.
Marketer
Visualise marketing budget allocation, traffic source breakdown, or campaign spend distribution across channels in a clean linear format.
Budget Analyst
Show departmental spending, cost category breakdown, or fund allocation in board presentations and financial reports.
Project Manager
Display resource allocation, task distribution by type, or time spent across project phases for stakeholder updates.
Student
Present survey data, experimental composition, or demographic breakdowns in academic assignments and research posters.
| Feature | Percentage Bar | Pie Chart |
|---|---|---|
| Proportional comparison | Excellent — linear length is easy to judge | Moderate — angle comparison is less accurate |
| Small segment visibility | Better — thin segments are still visible | Worse — small slices get compressed |
| Label placement | Inside segments or below the bar | Outside slices with connectors |
| Multiple groups | Can stack multiple bars for grouped comparison | Requires multiple pie charts |
| Data density | Works well with 2–10 categories | Best with 2–6 categories |
| Visual engagement | Minimal, clean design | More visually varied |
How percentage bar charts work
A percentage bar chart (or 100% stacked bar) displays proportional composition as a single horizontal bar where each segment's width is proportional to its category's share of the total. The total width of the bar always represents 100%. Each segment is calculated as (category value / total of all values) × 100%, so all segments together fill the entire bar exactly.
Worked example
How to use the Percentage Bar Chart Generator
Enter category data
Type each category and its value on a new line, separated by a comma. Example: Rent,3500. Add a title for your chart.
Generate the chart
Click generate to render the 100% stacked horizontal bar. Segments are colour-coded and sized proportionally to each category\'s value.
Export and share
Download the chart as a PNG to use in reports, slide decks, infographics, or share with your team or audience.
Tips for effective percentage bar charts
Sort segments logically
Sort from largest to smallest by default. This makes the bar easy to scan left-to-right. Use a different order only if you need to highlight a specific category first.
Limit to 8 segments
Too many categories create very thin segments that are hard to label and compare. Group small items into "Other" for a cleaner chart.
Show percentage labels
Always include percentage labels inside or near each segment. The visual bar shows proportions, but the exact numbers are essential for precision.
What is a 100% stacked bar chart?
A 100% stacked bar chart (percentage bar chart) is a chart that shows the relative percentage of multiple categories as a single bar. The total bar length represents 100%, and each coloured segment represents one category's proportion of the whole. All categories together fill the entire bar from left to right.
Unlike a regular stacked bar chart where the total length varies, the 100% version normalises every bar to the same length. This makes it easy to compare proportions across different totals, but it does not show the absolute magnitudes — only the relative composition.
When to use a 100% stacked bar chart
Percentage bar charts are most effective when the relative proportion matters more than the absolute total. Common applications include:
- Budget breakdowns: Show what percentage of a budget goes to each department or expense category
- Survey results: Display the proportion of responses in each category — e.g., satisfaction ratings
- Market share: Visualise the market share distribution among competitors
- Resource allocation: Show how time, people, or materials are distributed across activities
- Demographic composition: Present population segments by age group, income bracket, or region
Segment ordering best practices
The order of segments in a percentage bar chart significantly affects readability:
- Descending order: Largest to smallest (left to right) is the most intuitive and scannable arrangement
- Consistent colour coding: Use the same colour for the same category across multiple charts to aid recognition
- "Other" at the end: If you group small items as "Other", place it at the far right of the bar
- Highlighting a key category: If one category is the focus, consider placing it first even if it is not the largest — but label it clearly
Frequently asked questions
What is a 100% stacked bar chart?
A 100% stacked bar chart (also called a percentage bar chart) is a single bar divided into coloured segments proportional to each category's contribution to the total. The full bar always represents 100%.
When should I use a percentage bar chart?
Use it when you want to compare the relative proportions of categories within a total, rather than their absolute values. It is ideal for budget breakdowns, survey results, and market share analysis.
How are percentages calculated?
Each value is divided by the sum of all values and multiplied by 100. The width of each segment in the bar is proportional to its percentage of the total.
What is the difference between a percentage bar and a pie chart?
A percentage bar is a single straight bar divided into proportional segments, making it easier to compare small differences. A pie chart uses angles, which the human eye struggles to compare precisely.
Can I sort the segments?
Yes. By default the segments are sorted from largest to smallest. The largest category appears at the left of the bar for natural left-to-right reading.
How do I enter data?
Enter one category and value per line, separated by a comma. For example: Rent,3500. Lines with invalid numbers are skipped.
Is my data sent to a server?
No. The chart is rendered entirely in your browser using HTML5 Canvas. No data is uploaded or stored.
What file format is the download?
The chart is downloaded as a PNG image via canvas.toDataURL. PNG is lossless and suitable for presentations, documents, and the web.
How can I customise the colours?
The tool assigns colours from a built-in palette. You can modify the colour array in the script or note the colour order for reference in your own style guides.
How many categories can I include?
You can enter as many as you like, but for readability it is best to keep between 2 and 8 segments. Group small categories into "Other" to avoid very thin segments.