---
{
	"title": "Charts and graphs - Labels and reference values",
	"language": "en",
	"category": "Plugins",
	"description": "How to manage the chart labels and the reference values used to determine the points on the chart.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "labelsandreferencevalue",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-en.html">Charts and graphs - Simple and easy</a></li>
	<li><a href="labelsandreferencevalue-en.html">Labels and reference values (current)</a></li>
	<li><a href="custom-en.html">Customization, custom presets and multiple charts and graphs types</a></li>
	<li><a href="piecustom-en.html">Customizing pie charts</a></li>
	<li><a href="testing-en.html">Specific test cases</a></li>
</ul>

<hr />

<section>
	<h2>Default</h2>

	<pre><code>data-wb-charts = '{
	"noencapsulation": true
}'</code></pre>

	<table class="wb-charts wb-charts-line table" data-wb-charts='{ "noencapsulation": true }'>
		<thead>
			<tr>
				<td rowspan="3"></td>
				<th colspan="6">Group A</th>
				<th rowspan="3">Group B</th>
				<th rowspan="3">Group C</th>
			</tr>
			<tr>
				<th colspan="2">Subject</th>
				<th colspan="4">Topic</th>
			</tr>
			<tr>
				<th>Item 1</th>
				<th>Item 2</th>
				<th>Object 1</th>
				<th>Object 2</th>
				<th>Object 3</th>
				<th>Object 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Series one</th>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
			</tr>
			<tr>
				<th>Series two</th>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
			</tr>
			<tr>
				<th>Series three</th>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labels and reference values from the first table row</h2>

	<pre><code>data-wb-charts = '{
	"referencevalue": 1,
	"labelposition": 1,
	"noencapsulation": true
}'</code></pre>

	<table class="wb-charts wb-charts-line table" data-wb-charts='{ "referencevalue": 1, "labelposition": 1, "noencapsulation": true }'>
		<thead>
			<tr>
				<td rowspan="3"></td>
				<th colspan="6">Group A</th>
				<th rowspan="3">Group B</th>
				<th rowspan="3">Group C</th>
			</tr>
			<tr>
				<th colspan="2">Subject</th>
				<th colspan="4">Topic</th>
			</tr>
			<tr>
				<th>Item 1</th>
				<th>Item 2</th>
				<th>Object 1</th>
				<th>Object 2</th>
				<th>Object 3</th>
				<th>Object 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Series one</th>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
			</tr>
			<tr>
				<th>Series two</th>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
			</tr>
			<tr>
				<th>Series three</th>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labels from the first table row and reference values from the second table row</h2>

	<pre><code>data-wb-charts = '{
	"referencevalue": 2,
	"labelposition": 1,
	"noencapsulation": true
}'</code></pre>

	<table class="wb-charts wb-charts-line table" data-wb-charts='{ "referencevalue": 2, "labelposition": 1, "noencapsulation": true }'>
		<thead>
			<tr>
				<td rowspan="3"></td>
				<th colspan="6">Group A</th>
				<th rowspan="3">Group B</th>
				<th rowspan="3">Group C</th>
			</tr>
			<tr>
				<th colspan="2">Subject</th>
				<th colspan="4">Topic</th>
			</tr>
			<tr>
				<th>Item 1</th>
				<th>Item 2</th>
				<th>Object 1</th>
				<th>Object 2</th>
				<th>Object 3</th>
				<th>Object 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Series one</th>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
			</tr>
			<tr>
				<th>Series two</th>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
			</tr>
			<tr>
				<th>Series three</th>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labels from the first table row and reference values from the third table row</h2>

	<pre><code>data-wb-charts = '{
	"referencevalue": 3,
	"labelposition": 1,
	"noencapsulation": true
}'</code></pre>

	<table class="wb-charts wb-charts-line table" data-wb-charts='{ "referencevalue": 3, "labelposition": 1, "noencapsulation": true }'>
		<thead>
			<tr>
				<td rowspan="3"></td>
				<th colspan="6">Group A</th>
				<th rowspan="3">Group B</th>
				<th rowspan="3">Group C</th>
			</tr>
			<tr>
				<th colspan="2">Subject</th>
				<th colspan="4">Topic</th>
			</tr>
			<tr>
				<th>Item 1</th>
				<th>Item 2</th>
				<th>Object 1</th>
				<th>Object 2</th>
				<th>Object 3</th>
				<th>Object 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Series one</th>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
			</tr>
			<tr>
				<th>Series two</th>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
			</tr>
			<tr>
				<th>Series three</th>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labels from the second table row and reference values from the third table row</h2>

	<pre><code>data-wb-charts = '{
	"referencevalue": 3,
	"labelposition": 2,
	"noencapsulation": true
}'</code></pre>

	<table class="wb-charts wb-charts-line table" data-wb-charts='{ "referencevalue": 3, "labelposition": 2, "noencapsulation": true }'>
		<thead>
			<tr>
				<td rowspan="3"></td>
				<th colspan="6">Group A</th>
				<th rowspan="3">Group B</th>
				<th rowspan="3">Group C</th>
			</tr>
			<tr>
				<th colspan="2">Subject</th>
				<th colspan="4">Topic</th>
			</tr>
			<tr>
				<th>Item 1</th>
				<th>Item 2</th>
				<th>Object 1</th>
				<th>Object 2</th>
				<th>Object 3</th>
				<th>Object 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Series one</th>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
			</tr>
			<tr>
				<th>Series two</th>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
			</tr>
			<tr>
				<th>Series three</th>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labels and reference values from the third table row</h2>

	<pre><code>data-wb-charts = '{
	"referencevalue": 3,
	"labelposition": 3,
	"noencapsulation": true
}'</code></pre>

	<table class="wb-charts wb-charts-line table" data-wb-charts='{ "referencevalue": 3, "labelposition": 3, "noencapsulation": true }'>
		<thead>
			<tr>
				<td rowspan="3"></td>
				<th colspan="6">Group A</th>
				<th rowspan="3">Group B</th>
				<th rowspan="3">Group C</th>
			</tr>
			<tr>
				<th colspan="2">Subject</th>
				<th colspan="4">Topic</th>
			</tr>
			<tr>
				<th>Item 1</th>
				<th>Item 2</th>
				<th>Object 1</th>
				<th>Object 2</th>
				<th>Object 3</th>
				<th>Object 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Series one</th>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
				<td>5</td>
				<td>10</td>
			</tr>
			<tr>
				<th>Series two</th>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
				<td>3</td>
				<td>9</td>
			</tr>
			<tr>
				<th>Series three</th>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
				<td>4</td>
				<td>12</td>
			</tr>
		</tbody>
	</table>
</section>