Charts and graphs - Simple and easy
- Charts and graphs - Simple and easy (current)
- Labels and reference values
- Customization, custom presets and multiple charts and graphs types
- Customizing pie charts
- Specific test cases
Default
<table class="wb-charts table">
Education | Task | Navigation | Support | Information | Corporate | |
---|---|---|---|---|---|---|
General | 2 | 0 | 20 | 4 | 100 | 50 |
Students | 2 | 2 | 1 | 5 | 50 | 0 |
Business | 60 | 10 | 20 | 90 | 50 | 8 |
Professional | 46 | 26 | 5 | 101 | 200 | 142 |
Lawyer | 0 | 2 | 4 | 0 | 300 | 300 |
Area charts
<table class="wb-charts wb-charts-area table">
Education | Task | Navigation | Support | Information | Corporate | |
---|---|---|---|---|---|---|
General | 2 | 0 | 20 | 4 | 100 | 50 |
Students | 2 | 2 | 1 | 5 | 50 | 0 |
Business | 60 | 10 | 20 | 90 | 50 | 8 |
Professional | 46 | 26 | 5 | 101 | 200 | 142 |
Lawyer | 0 | 2 | 4 | 0 | 300 | 300 |
Bar charts
<table class="wb-charts wb-charts-bar table">
Education | Task | Navigation | Support | Information | Corporate | |
---|---|---|---|---|---|---|
General | 2 | 0 | 20 | 4 | 100 | 50 |
Students | 2 | 2 | 1 | 5 | 50 | 0 |
Business | 60 | 10 | 20 | 90 | 50 | 8 |
Professional | 46 | 26 | 5 | 101 | 200 | 142 |
Lawyer | 0 | 2 | 4 | 0 | 300 | 300 |
Pie charts
<table class="wb-charts wb-charts-pie table">
Education | Task | Navigation | Support | Information | Corporate | |
---|---|---|---|---|---|---|
General | 2 | 0 | 20 | 4 | 100 | 50 |
Students | 2 | 2 | 1 | 5 | 50 | 0 |
Business | 60 | 10 | 20 | 90 | 50 | 8 |
Professional | 46 | 26 | 5 | 101 | 200 | 142 |
Lawyer | 0 | 2 | 4 | 0 | 300 | 300 |
Pie chart with labels
<table class="wb-charts wb-charts-pie table">
When using labels, some labels may overlap if there are too many slices or there are two or more small slices next to each other. In the case that your labels overlap, you should consider displaying your data in a different type of chart.
Consult the documentation to see the configuration options for pie charts with labels.
Education | Task | Navigation | Support | Information | Corporate | |
---|---|---|---|---|---|---|
Business | 60 | 10 | 20 | 90 | 50 | 8 |
Data table used
Education | Task | Navigation | Support | Information | Corporate | |
---|---|---|---|---|---|---|
Business | 60 | 10 | 20 | 90 | 50 | 8 |
View code
<table class="table">
<caption>Number of pages by main purpose and audience</caption>
<tr>
<td></td>
<th>Education</th>
<th>Task</th>
<th>Navigation</th>
<th>Support</th>
<th>Information</th>
<th>Corporate</th>
</tr>
<tr>
<th>General</th>
<td>2</td>
<td>0</td>
<td>20</td>
<td>4</td>
<td>100</td>
<td>50</td>
</tr>
<tr>
<th>Students</th>
<td>2</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>50</td>
<td>0</td>
</tr>
<tr>
<th>Business</th>
<td>60</td>
<td>10</td>
<td>20</td>
<td>90</td>
<td>50</td>
<td>8</td>
</tr>
<tr>
<th>Professional</th>
<td>46</td>
<td>26</td>
<td>5</td>
<td>101</td>
<td>200</td>
<td>142</td>
</tr>
<tr>
<th>Lawyer</th>
<td>0</td>
<td>2</td>
<td>4</td>
<td>0</td>
<td>300</td>
<td>300</td>
</tr>
</table>
Page details
- Date modified: