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

# Charts and graphs - Simple and easy

- Documentation
- Questions or comments?

- 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">`

Number of pages by main purpose and audience
| 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">`

Number of pages by main purpose and audience
| 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">`

Number of pages by main purpose and audience
| 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">`

Number of pages by main purpose and audience
| 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.

Number of pages by main purpose and audience
| Education | Task | Navigation | Support | Information | Corporate
Business | 60 | 10 | 20 | 90 | 50 | 8

## Data table used

Number of pages by main purpose and audience
| 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>

Date modified:
  2015-03-10