- Skip to main content
- Skip to "About this site"

# Charts and graphs - Specific test cases

- Documentation
- Questions or comments?

- Charts and graphs - Simple and easy
- Labels and reference values
- Customization, custom presets and multiple charts and graphs types
- Customizing pie charts
- Specific test cases (current)

## 100% pie charts

The expected result is a circle where the legend only contains one value. The emphasis text in the table caption should be cloned into the title of the chart (`<figcaption>`) and into the link title (`<summary>`) for viewing the table.

`<table class="wb-charts wb-charts-pie table">`

Table with one item (100%)
| Value
Car | 125

## Labels and reversed table parsing

The expected result is that both tables should produce the same chart or graph with the following text labels:

- External needs, x-axis position 0 of 5
- Needs bypass, x-axis position 3 of 5
- Internal needs, x-axis position 5 of 5

`<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true}'>`

Number of pages by main purpose and audience
| External needs | Needs bypass | Internal needs
Education | Task | Navigation | Support | Information | Corporate
--- | --- | --- | --- | --- | ---
General | 2 | 0 | 20 | 4 | 100 | 50
Students | 2 | 2 | 1 | 5 | 50 | 0
Buisness | 60 | 10 | 20 | 90 | 50 | 8
Professional | 46 | 26 | 5 | 101 | 200 | 142
Lawyer | 0 | 2 | 4 | 0 | 300 | 300

`<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true, "reversettblparsing": true}'>`

Number of pages by main purpose and audience
| General | Students | Buisness | Professional | Lawyer
External needs | Education | 2 | 2 | 60 | 46 | 0
Task | 0 | 2 | 10 | 26 | 2
Needs bypass | Navigation | 20 | 1 | 20 | 5 | 4
Support | 4 | 5 | 90 | 101 | 0
Internal needs | Information | 100 | 50 | 50 | 200 | 300
Corporate | 50 | 0 | 8 | 142 | 300

## Pie charts and reversed table parsing

The expecting result is the table produceds the same chart or graph. There is one exception where the width of both pie charts could be different.

`<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1 }'>`

Number of pages with tasks as a main purpose per audience
| General | Students | Buisness | Professional | Lawyer
Task | 0 | 2 | 10 | 26 | 2

Please note that `<colgroup>` elements are required for creating the following pie charts.

`<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1, "reversettblparsing": true }'>`

Number of pages with tasks as a main purpose per audience
| Task
General | 0
Students | 2
Buisness | 10
Professional | 26
Lawyer | 2

    <caption>Number of pages with tasks as a main purpose per audience</caption>
    <colgroup><col /></colgroup>
    <colgroup><col /></colgroup>
    <tr>
    	<td></td>
    	<th>Task</th>
    </tr>

Date modified:
  2015-03-10