<div class="header-panel member">
<h2><span class="identifier">DataLabelBase</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.chart.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.chart.Module.html"><span class="identifier">wijmo.chart</span></a></dd>
<dt>Derived Classes</dt><dd><a href="topic/wijmo.chart.DataLabel.Class.html"><span class="identifier">DataLabel</span></a>, <a href="topic/wijmo.chart.PieDataLabel.Class.html"><span class="identifier">PieDataLabel</span></a></dd>
</dl>
<div class="comment"><p>Represents the base abstract class for the <a href="topic/wijmo.chart.DataLabel.Class.html"><span class="identifier">DataLabel</span></a> and the <a href="topic/wijmo.chart.PieDataLabel.Class.html"><span class="identifier">PieDataLabel</span></a> classes.</p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<h3 class="node">Properties</h3>
<ul>
<li class="mproperty"><a href="topic/wijmo.chart.DataLabelBase.Class.html/#border">border</a></li>
<li class="mproperty"><a href="topic/wijmo.chart.DataLabelBase.Class.html/#connectingLine">connectingLine</a></li>
<li class="mproperty"><a href="topic/wijmo.chart.DataLabelBase.Class.html/#content">content</a></li>
<li class="mproperty"><a href="topic/wijmo.chart.DataLabelBase.Class.html/#offset">offset</a></li>
</ul>
<h3 class="node">Methods</h3>
<ul>
<li class="mmethod raiser"><a href="topic/wijmo.chart.DataLabelBase.Class.html/#onRendering">onRendering</a></li>
</ul>
<h3 class="node">Events</h3>
<ul>
<li class="mevent"><a href="topic/wijmo.chart.DataLabelBase.Class.html/#rendering">rendering</a></li>
</ul>
</div>
<h3 class="node">Properties</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="border" class="member-panel mproperty">
<h3>border</h3>
<div class="comment"><p>Gets or sets a value indicating whether the data labels have borders.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="connectingLine" class="member-panel mproperty">
<h3>connectingLine</h3>
<div class="comment"><p>Gets or sets a value indicating whether to draw lines that connect 
labels to the data points.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="content" class="member-panel mproperty">
<h3>content</h3>
<div class="comment"><p>Gets or sets the content of data labels.</p>
<p>The content can be specified as a string or as a function that
takes <a href="topic/wijmo.chart.HitTestInfo.Class.html"><span class="identifier">HitTestInfo</span></a> object as a parameter.</p>
<p>When the label content is a string, it can contain any of the following
parameters:</p>
<p><ul>
 <li><b>seriesName</b>: Name of the series that contains the data point (FlexChart only).</li>
 <li><b>pointIndex</b>: Index of the data point.</li>
 <li><b>value</b>: <b>Value</b> of the data point.</li>
 <li><b>x</b>: <b>x</b>-value of the data point (FlexChart only).</li>
 <li><b>y</b>: <b>y</b>-value of the data point (FlexChart only).</li>
 <li><b>name</b>: <b>Name</b> of the data point.</li>
 <li><b>propertyName</b>: any property of data object.</li>
</ul></p>
<p>The parameter must be enclosed in curly brackets, for example 'x={x}, y={y}'.</p>
<p>In the following example, we show the y value of the data point in the labels.</p>


<pre>// Create a chart and show y data in labels positioned above the data point.
 var chart = new wijmo.chart.FlexChart('#theChart');
 chart.initialize({
     itemsSource: data,
     bindingX: 'country',
     series: [
         { name: 'Sales', binding: 'sales' },
         { name: 'Expenses', binding: 'expenses' },
         { name: 'Downloads', binding: 'downloads' }],
 });
 chart.dataLabel.position = "Top";
 chart.dataLabel.content = "{country} {seriesName}:{y}";</pre>
<p>The next example shows how to set data label content using a function.</p>


<pre>// Set the data label content 
 chart.dataLabel.content = function (ht) {
   return ht.name + ":" + ht.value.toFixed();
 }</pre></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><span class="identifier">any</span></dd>
</dl>
</div>
<div id="offset" class="member-panel mproperty">
<h3>offset</h3>
<div class="comment"><p>Gets or sets the offset from label to the data point.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank"><span class="identifier">number</span></a></dd>
</dl>
</div>
</div>
<h3 class="node">Methods</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="onRendering" class="member-panel mmethod raiser">
<h3>onRendering</h3>
<pre>onRendering(e: <a href="topic/wijmo.chart.DataLabelRenderEventArgs.Class.html"><span class="identifier">DataLabelRenderEventArgs</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Raises the <a href="topic/wijmo.chart.DataLabelBase.Class.html/#rendering"><span class="identifier">rendering</span></a> event.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>e</b>: <a href="topic/wijmo.chart.DataLabelRenderEventArgs.Class.html"><span class="identifier">DataLabelRenderEventArgs</span></a><br/><p>The <a href="topic/wijmo.chart.DataLabelRenderEventArgs.Class.html"><span class="identifier">DataLabelRenderEventArgs</span></a> object used to render the label.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
</div>
<h3 class="node">Events</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="rendering" class="member-panel mevent">
<h3>rendering</h3>
<div class="comment"><p>Occurs before the data label is rendered.</p></div>
<dl class="dl-horizontal">
  <dt>Arguments</dt><dd><a href="topic/wijmo.chart.DataLabelRenderEventArgs.Class.html"><span class="identifier">DataLabelRenderEventArgs</span></a></dd>
</dl>
</div>
</div>
