Charts and graphs - Simple and easy

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: