<p>The CSS selector or the element which the chart will be set to. D3 selection object can be specified. If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).</p>
<br>
<p>If this option is not specified, the chart will be generated but not be set. Instead, we can access the element by <spanclass="code">chart.element</span> and set it by ourselves.</p>
<h5>Note:</h5>
<p>When chart is not binded, c3 starts observing if <spanclass="code">chart.element</span> is binded by <spanclass="code">MutationObserver</span>. In this case, polyfill is required in IE9 and IE10 because they do not support <spanclass="code">MutationObserver</span>. On the other hand, if chart always will be binded, polyfill will not be required because <spanclass="code">MutationObserver</span> will never be called.</p>
<p>If this option is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>size: {
width: 640
}</code></pre>
</div>
<h5>Note:</h5>
<p>This option should be specified if possible because it can improve its performance because some size calculations will be skipped by an explicit value.</p>
</section>
<hr>
<section>
<h3>
<ahref='#size-height'>size.height</a>
</h3>
<p>The desired height of the chart element.</p>
<br>
<p>If this option is not specified, the height of the chart will be calculated by the size of the parent element it's appended to.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>size: {
height: 480
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#padding-top'>padding.top</a>
</h3>
<p>The padding on the top of the chart.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>padding: {
top: 20
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/options_padding.html'>Padding for the chart</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#padding-right'>padding.right</a>
</h3>
<p>The padding on the right of the chart.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>padding: {
right: 20
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/options_padding.html'>Padding for the chart</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#padding-bottom'>padding.bottom</a>
</h3>
<p>The padding on the bottom of the chart.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>padding: {
bottom: 20
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/options_padding.html'>Padding for the chart</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#padding-left'>padding.left</a>
</h3>
<p>The padding on the left of the chart.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>padding: {
left: 20
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/options_padding.html'>Padding for the chart</a>
</li>
</ul>
<h5>Note:</h5>
<p>This option should be specified if possible because it can improve its performance because some size calculations will be skipped by an explicit value.</p>
</section>
<hr>
<section>
<h3>
<ahref='#color-pattern'>color.pattern</a>
</h3>
<p>Set custom color pattern.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>color: {
pattern: ['#1f77b4', '#aec7e8', ...]
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/options_color.html'>Custom color pattern</a>
<p>Set duration of transition (in milliseconds) for chart animation.</p>
<h5>Note:</h5>
<p>If <spanclass="code">0</span> or <spanclass="code">null</span> set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.</p>
<h5>Default:</h5>
<code>350</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>transition: {
duration: 500
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/transition_duration.html'>Change the duration of transition</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#oninit'>oninit</a>
</h3>
<p>Set a callback to execute when the chart is initialized.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>oninit: function () { ... }</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#onrendered'>onrendered</a>
</h3>
<p>Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>onrendered: function () { ... }</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#onmouseover'>onmouseover</a>
</h3>
<p>Set a callback to execute when mouse enters the chart.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>onmouseover: function () { ... }</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#onmouseout'>onmouseout</a>
</h3>
<p>Set a callback to execute when mouse leaves the chart.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>onmouseout: function () { ... }</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#onresize'>onresize</a>
</h3>
<p>Set a callback to execute when user resizes the screen.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>onresize: function () { ... }</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#onresized'>onresized</a>
</h3>
<p>Set a callback to execute when screen resize finished.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>onresized: function () { ... }</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#data-url'>data.url</a>
</h3>
<p>Load a CSV or JSON file from a URL. Note that this will not work if loading via the "file://" protocol as the most browsers will block XMLHTTPRequests.</p>
<p>We can show the data with non-index x values by this option. This option is required when the type of x axis is timeseries. If this option is set on category axis, the values of the data on the key will be used for category names.</p>
<p>If this option is specified, the element <spanclass="code">g</span> for the data has an additional class that has the prefix <spanclass="code">c3-target-</span> (e.g. <spanclass="code">c3-target-additional-data1-class</span>).</p>
<p>The formatter function receives 4 arguments such as <spanclass="code">v</span>, <spanclass="code">id</span>, <spanclass="code">i</span>, <spanclass="code">j</span> and it must return a string that will be shown as the label. The arguments are:</p>
<br>
<ul>
<li><spanclass="code">v</span> is the value of the data point where the label is shown.</li>
<li><spanclass="code">id</span> is the id of the data where the label is shown.</li>
<li><spanclass="code">i</span> is the index of the data point where the label is shown.</li>
<li><spanclass="code">j</span> is the sub index of the data point where the label is shown.</li>
</ul>
<p>Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (e.g. <spanclass="code">d3.format('$')</span>)</p>
<h5>Default:</h5>
<code>{}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
labels: {
format: function (v, id, i, j) { ... }
// it's possible to set for each data
//format: {
// data1: function (v, id, i, j) { ... },
<p>This option changes the order of stacking the data and pieces of pie/donut. If <code>null</code> specified, it will be the order the data loaded. If function specified, it will be used to sort the data and it will receive the data as argument.</p>
<p>The values must be an array for each data and it should include an object that has <spanclass="code">start</span>, <spanclass="code">end</span>, <spanclass="code">style</span>. If <spanclass="code">start</span> is not set, the start will be the first data point. If <spanclass="code">end</span> is not set, the end will be the last data point.</p>
<br>
<p>Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.</p>
<ahref='/samples/simple_regions.html'>Line Chart with Region</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#data-color'>data.color</a>
</h3>
<p>Set color converter function.</p>
<br>
<p>This option should a function and the specified function receives <spanclass="code">color</span> (e.g. '#ff0000') and <spanclass="code">d</span> that has data parameters like id, value, index, etc. And it must return a string that represents color (e.g. '#00ff00').</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
color: function (color, d) { ... }
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/data_color.html'>Data Color</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#data-colors'>data.colors</a>
</h3>
<p>Set color for each data.</p>
<h5>Default:</h5>
<code>{}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
colors: {
data1: '#ff0000',
...
}
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/data_color.html'>Data Color</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#data-hide'>data.hide</a>
</h3>
<p>Hide each data when the chart appears.</p>
<br>
<p>If <code>true</code> specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.</p>
<h5>Default:</h5>
<code>false</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
// all of data will be hidden
hide: true
// specified data will be hidden
hide: ['data1', ...]
}</code></pre>
</div>
<h5>Note:</h5>
<p>This option does not hide legends, so we need to use <ahref="#legend-hide">legend.hide</a> option together if we want to hide legend too.</p>
<p>If this option is set <code>true</code>, we can select the data points and get/set its state of selection by API (e.g. <a>select</a>, <a>unselect</a>, <a>selected</a>).</p>
<p>Set multiple data points selection enabled.</p>
<br>
<p>If this option set <code>true</code>, multiple data points can have the selected state at the same time. If <code>false</code> set, only one data point can have the selected state and the others will be unselected when the new data point is selected.</p>
<p>Set a callback for each data point to determine if it's selectable or not.</p>
<br>
<p>The callback will receive <spanclass="code">d</span> as an argument and it has some parameters like <spanclass="code">id</span>, <spanclass="code">value</span>, <spanclass="code">index</span>. This callback should return <spanclass="code">boolean</span>.</p>
<h5>Default:</h5>
<code>function () { return true; }</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
selection: {
isselectable: function (d) { ... }
}
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#data-onclick'>data.onclick</a>
</h3>
<p>Set a callback for click event on each data point.</p>
<br>
<p>This callback will be called when each data point clicked and will receive <spanclass="code">d</span> and <spanclass="code">element</span> as the arguments. <spanclass="code">d</span> is the data clicked and <spanclass="code">element</span> is the element clicked. In this callback, <spanclass="code">this</span> will be the <spanclass="code">Chart</span> object.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
onclick: function (d, element) { ... }
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#data-onmouseover'>data.onmouseover</a>
</h3>
<p>Set a callback for mouseover event on each data point.</p>
<br>
<p>This callback will be called when mouse cursor moves onto each data point and will receive <spanclass="code">d</span> as the argument. <spanclass="code">d</span> is the data where mouse cursor moves onto. In this callback, <spanclass="code">this</span> will be the <spanclass="code">Chart</span> object.</p>
<h5>Default:</h5>
<code>function () {}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>data: {
onmouseover: function (d) { ... }
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#data-onmouseout'>data.onmouseout</a>
</h3>
<p>Set a callback for mouseout event on each data point.</p>
<br>
<p>This callback will be called when mouse cursor moves out each data point and will receive <spanclass="code">d</span> as the argument. <spanclass="code">d</span> is the data where mouse cursor moves out. In this callback, <spanclass="code">this</span> will be the <spanclass="code">Chart</span> object.</p>
<p>This must be an array that includes category names in string. If category names are included in the date by <spanclass="code">data.x</span> option, this is not required.</p>
<p>If <code>true</code> is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If <code>false</code> is set, all of ticks will be shown.</p>
<br>
<p>We can change the number of ticks to be shown by <ahref="#axis-x-tick-culling-max">axis.x.tick.culling.max</a>.</p>
<h5>Default:</h5>
<ul>
<li><code>true</code> for indexed axis and timeseries axis</li>
<p>This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value).</p>
<p>If <code>true</code> set, the ticks will be positioned nicely. If <code>false</code> set, the ticks will be positioned according to x value of the data points.</p>
<p>If this option is provided, the position of the ticks will be determined based on those values. This option works with timeseries data and the x values will be parsed accoding to the type of the value and <ahref="#data-xFormat">data.xFormat</a> option.</p>
<p>If this option is set <code>true</code>, when a tick's text on the x-axis is too long, it splits the text into multiple lines in order to avoid text overlapping.</p>
<p>If this option is set, the range of x axis will increase/decrease according to the values. If no padding is needed in the ragen of x axis, <code>0</code> should be set. On category axis, this option will be ignored.</p>
<h5>Default:</h5>
<code>{}</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>axis: {
x: {
padding: {
left: 0,
right: 0
}
}
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#axis-x-height'>axis.x.height</a>
</h3>
<p>Set height of x axis.</p>
<br>
<p>The height of x axis can be set manually by this option. If you need more space for x axis, please use this option for that. The unit is <code>pixel</code>.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>axis: {
x: {
height: 20
}
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#axis-x-extent'>axis.x.extent</a>
</h3>
<p>Set default extent for subchart and zoom. This can be an array or function that returns an array.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>axis: {
x: {
extent: [5, 10]
}
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#axis-x-label'>axis.x.label</a>
</h3>
<p>Set label on x axis.</p>
<br>
<p>You can set x axis label and change its position by this option. <code>string</code> and <code>object</code> can be passed and we can change the poisiton by passing <code>object</code> that has <spanclass="code">position</span> key. Available position differs according to the axis direction (vertical or horizontal). If <code>string</code> set, the position will be the default.</p>
<br>
<p>If it's horizontal axis:</p>
<ul>
<li>inner-right <code>[default]</code></li>
<li>inner-center</li>
<li>inner-left</li>
<li>outer-right</li>
<li>outer-center</li>
<li>outer-left</li>
</ul>
<p>If it's vertical axis:</p>
<ul>
<li>inner-top <code>[default]</code></li>
<li>inner-middle</li>
<li>inner-bottom</li>
<li>outer-top</li>
<li>outer-middle</li>
<li>outer-bottom</li>
</ul>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>axis: {
x: {
label: 'Your X Axis'
}
}</code></pre>
</div>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>axis: {
x: {
label: {
text: 'Your X Axis',
<p>Padding will be added based on this value, so if you don't need the padding, please set <spanclass="code">axis.y.padding</span> to disable it (e.g. <spanclass="code">axis.y.padding = 0</span>).</p>
<p>Padding will be added based on this value, so if you don't need the padding, please set <spanclass="code">axis.y.padding</span> to disable it (e.g. <spanclass="code">axis.y.padding = 0</span>).</p>
<p>The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, <spanclass="code">axis.y.tick.format</span> or <spanclass="code">axis.y.tick.values</span> will be helpful.</p>
<p>You can set padding for y axis to create more space on the edge of the axis. This option accepts <code>object</code> and it can include <spanclass="code">top</span> and <spanclass="code">bottom</span>. <spanclass="code">top</span>, <spanclass="code">bottom</span> will be treated as pixels.</p>
<p>This option accepts <code>array</code> including <code>object</code> that has <spanclass="code">value</span>, <spanclass="code">text</span>, <spanclass="code">position</span> and <spanclass="code">class</span>. <spanclass="code">text</span>, <spanclass="code">position</span> and <spanclass="code">class</span> are optional. For <spanclass="code">position</span>, <spanclass="code">start</span>, <spanclass="code">middle</span> and <spanclass="code">end</span> (default) are available.</p>
<p>If x axis is category axis, <spanclass="code">value</span> can be category name. If x axis is timeseries axis, <spanclass="code">value</span> can be date string, Date object and unixtime integer.</p>
<h5>Default:</h5>
<code>[]</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>grid: {
x: {
lines: [
{value: 2, text: 'Label on 2'},
{value: 5, text: 'Label on 5', class: 'label-5'},
{value: 6, text: 'Label on 6', position: 'start'}
]
}
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/grid_x_lines.html'>Additional X Grid Lines</a>
<p>This option accepts <code>array</code> including <code>object</code> that has <spanclass="code">value</span>, <spanclass="code">text</span>, <spanclass="code">position</span> and <spanclass="code">class</span>.</p>
<h5>Default:</h5>
<code>[]</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>grid: {
y: {
lines: [
{value: 100, text: 'Label on 100'},
{value: 200, text: 'Label on 200', class: 'label-200'},
{value: 300, text: 'Label on 300', position: 'middle'}
]
}
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/grid_y_lines.html'>Additional Y Grid Lines</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#grid-y-ticks'>grid.y.ticks</a>
</h3>
<p>not yet</p>
</section>
<hr>
<section>
<h3>
<ahref='#regions'>regions</a>
</h3>
<p>Show rectangles inside the chart.</p>
<br>
<p>This option accepts <code>array</code> including <code>object</code> that has <spanclass="code">axis</span>, <spanclass="code">start</span>, <spanclass="code">end</span> and <spanclass="code">class</span>. The keys <spanclass="code">start</span>, <spanclass="code">end</span> and <spanclass="code">class</span> are optional.</p>
<p><spanclass="code">axis</span> must be <spanclass="code">x</span>, <spanclass="code">y</span> or <spanclass="code">y2</span>. <spanclass="code">start</span> and <spanclass="code">end</span> should be the value where regions start and end. If not specified, the edge values will be used. If timeseries x axis, date string, Date object and unixtime integer can be used. If <spanclass="code">class</span> is set, the region element will have it as class.</p>
<p>If <code>true</code> given, all legend will be hidden. If <code>string</code> or <code>array</code> given, only the legend that has the id will be hidden.</p>
<h5>Default:</h5>
<code>false</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>legend: {
hide: true
//or hide: 'data1'
//or hide: ['data1', 'data2']
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#legend-position'>legend.position</a>
</h3>
<p>Change the position of legend.</p>
<br>
<p>Currently <spanclass="code">bottom</span>, <spanclass="code">right</span> and <spanclass="code">inset</span> are supported.</p>
<p>This option accepts <code>object</code> that has the keys <spanclass="code">anchor</span>, <spanclass="code">x</span>, <spanclass="code">y</span> and <spanclass="code">step</span>.</p>
<p><spanclass="code">anchor</span> decides the position of the legend. These anchors are available:</p>
<ul>
<li>top-left</li>
<li>top-right</li>
<li>bottom-left</li>
<li>bottom-right</li>
</ul>
<p><spanclass="code">x</span> and <spanclass="code">y</span> set the position of the legend based on the anchor.</p>
<p><spanclass="code">step</span> defines the max step the legend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).</p>
<p>Set format for the name of each data in tooltip.</p>
<br>
<p>Specified function receives <spanclass="code">name</span>, <spanclass="code">ratio</span>, <spanclass="code">id</span> and <spanclass="code">index</span> of the data point to show. <spanclass="code">ratio</span> will be <code>undefined</code> if the chart is not donut/pie/gauge.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>tooltip: {
format: {
name: function (name, ratio, id, index) { return name; }
<p>Set format for the value of each data in tooltip.</p>
<br>
<p>Specified function receives <spanclass="code">name</span>, <spanclass="code">ratio</span>, <spanclass="code">id</span> and <spanclass="code">index</span> of the data point to show. <spanclass="code">ratio</span> will be <code>undefined</code> if the chart is not donut/pie/gauge.</p>
<p>If <code>undefined</code> returned, the row of that value will be skipped.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>tooltip: {
format: {
value: function (value, ratio, id, index) { return ratio; }
<p>This option can be used to modify the tooltip position by returning <code>object</code> that has <spanclass="code">top</span> and <spanclass="code">left</span>.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>tooltip: {
position: function (data, width, height, element) {
return {top: 0, left: 0};
}
}</code></pre>
</div>
<h5>Reference:</h5>
<ul>
<li>
<ahref='https://github.com/c3js/c3/pull/833'>Introduce tooltip.position callback function #833</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#tooltip-contents'>tooltip.contents</a>
</h3>
<p>Set custom HTML for the tooltip.</p>
<br>
<p>Specified function receives <spanclass="code">data</span>, <spanclass="code">defaultTitleFormat</span>, <spanclass="code">defaultValueFormat</span> and <spanclass="code">color</span> of the data point to show. If <spanclass="code">tooltip.grouped</span> is <code>true</code>, <spanclass="code">data</span> includes multiple data points.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
return ... // formatted html as you want
<p>Disable the default animation of zoom. This option is useful when you want to get the zoomed domain by onzoom or onzoomend handlers and override the default animation behavior. See <ahref="https://github.com/c3js/c3/pull/2439">#2439</a> for details.</p>
<p>Set if null data point will be connected or not.</p>
<br>
<p>If <code>true</code> set, the region of null data will be connected without any data point. If <code>false</code> set, the region of null data will not be connected and get empty.</p>
<h5>Default:</h5>
<code>false</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>line: {
connectNull: true
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#line-step-type'>line.step.type</a>
</h3>
<p>Change step type for step chart.</p>
<br>
<p><spanclass="code">step</span>, <spanclass="code">step-before</span> and <spanclass="code">step-after</span> can be used.</p>
<h5>Default:</h5>
<code>'step'</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>line: {
step: {
type: 'step-after'
}
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#area-zerobased'>area.zerobased</a>
</h3>
<p>Set if min or max value will be 0 on area chart.</p>
<h5>Default:</h5>
<code>true</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>area: {
zerobased: false
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#bar-width'>bar.width</a>
</h3>
<p>Change the width of bar chart.</p>
<h5>Default:</h5>
<code>auto</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>bar: {
width: 10
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/chart_bar.html'>Bar Chart</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#bar-width-ratio'>bar.width.ratio</a>
</h3>
<p>Change the width of bar chart by ratio.</p>
<h5>Default:</h5>
<code>0.6</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>bar: {
width: {
ratio: 0.2
}
}</code></pre>
</div>
<h5>Example:</h5>
<ul>
<li>
<ahref='/samples/chart_bar.html'>Bar Chart</a>
</li>
</ul>
</section>
<hr>
<section>
<h3>
<ahref='#bar-zerobased'>bar.zerobased</a>
</h3>
<p>Set if min or max value will be 0 on bar chart.</p>
<h5>Default:</h5>
<code>true</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>bar: {
zerobased: false
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#pie-label-show'>pie.label.show</a>
</h3>
<p>Show or hide label on each pie piece.</p>
<h5>Default:</h5>
<code>true</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>pie: {
label: {
show: false
}
}</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#pie-label-format'>pie.label.format</a>
</h3>
<p>Set formatter for the label on each pie piece.</p>
<h5>Default:</h5>
<code>undefined</code>
<h5>Format:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>pie: {
label: {
format: function (value, ratio, id) {
<p>This API highlights specified targets and fade out the others.</p>
<br>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be highlighted.</p>
<p><spanclass="code">targetIds</span> <code>String</code> or <code>Array</code></p>
<p>Target ids to be highlighted.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// data1 will be highlighted and the others will be faded out
chart.focus('data1');
// data1 and data2 will be highlighted and the others will be faded out
chart.focus(['data1', 'data2']);
// all targets will be highlighted
chart.focus();</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-defocus'>defocus</a>
</h3>
<p>This API fades out specified targets and reverts the others.</p>
<br>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be faded out.</p>
<p><spanclass="code">targetIds</span> <code>String</code> or <code>Array</code></p>
<p>Target ids to be faded out.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// data1 will be faded out and the others will be reverted.
chart.defocus('data1');
// data1 and data2 will be faded out and the others will be reverted.
chart.defocus(['data1', 'data2']);
// all targets will be faded out.
chart.defocus();</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-revert'>revert</a>
</h3>
<p>This API reverts specified targets.</p>
<br>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be reverted.</p>
<p><spanclass="code">targetIds</span> <code>String</code> or <code>Array</code></p>
<p>Target ids to be reverted.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// data1 will be reverted.
chart.revert('data1');
// data1 and data2 will be reverted.
chart.revert(['data1', 'data2']);
// all targets will be reverted.
chart.revert();</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-show'>show</a>
</h3>
<p>This API shows specified targets.</p>
<br>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be shown.</p>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be hidden.</p>
<p>This API toggles (shows or hides) specified targets.</p>
<br>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be toggles.</p>
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be toggles.</p>
<p>If <spanclass="code">url</span>, <spanclass="code">json</span>, <spanclass="code">rows</span> and <spanclass="code">columns</span> given, the data will be loaded. If data that has the same target id is given, the chart will be updated. Otherwise, new target will be added.</p>
<br>
<p>If <spanclass="code">classes</span> given, the classes specified by <spanclass="code">data.classes</span> will be updated. <spanclass="code">classes</span> must be <code>Object</code> that has target id as keys.</p>
<br>
<p>If <spanclass="code">categories</span> given, the categories specified by <spanclass="code">axis.x.categories</span> or <spanclass="code">data.x</span> will be updated. <spanclass="code">categories</span> must be <code>Array</code>.</p>
<br>
<p>If <spanclass="code">axes</span> given, the axes specified by <spanclass="code">data.axes</span> will be updated. <spanclass="code">axes</span> must be <code>Object</code> that has target id as keys.</p>
<br>
<p>If <spanclass="code">colors</span> given, the colors specified by <spanclass="code">data.colors</span> will be updated. <spanclass="code">colors</span> must be <code>Object</code> that has target id as keys.</p>
<br>
<p>If <spanclass="code">type</span> or <spanclass="code">types</span> given, the type of targets will be updated. <spanclass="code">type</span> must be <code>String</code> and <spanclass="code">types</span> must be <code>Object</code>.</p>
<br>
<p>If <spanclass="code">unload</span> given, data will be unloaded before loading new data. If <code>true</code> given, all of data will be unloaded. If target ids given as <code>String</code> or <code>Array</code>, specified targets will be unloaded.</p>
<br>
<p>If <spanclass="code">done</span> given, the specified function will be called after data loded.</p>
<h5>Note:</h5>
<p><spanclass="code">unload</span> should be used if some data needs to be unloaded simultaneously. If you call <spanclass="code">unload</span> API soon after/before <spanclass="code">load</span> instead of <spanclass="code">unload</span> param, chart will not be rendered properly because of cancel of animation.</p>
<br>
<p><spanclass="code">done</span> will be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Load data1 and unload data2 and data3
<p>You can specify multiple targets by giving an array that includes <spanclass="code">id</span> as <code>String</code>. If no argument is given, all of targets will be toggles.</p>
<p>If <spanclass="code">ids</span> given, the data that has specified target id will be unloaded. <spanclass="code">ids</span> should be <code>String</code> or <code>Array</code>. If <spanclass="code">ids</span> is not specified, all data will be unloaded.</p>
<br>
<p>If <spanclass="code">done</span> given, the specified function will be called after data loded.</p>
<h5>Note:</h5>
<p>If you call <spanclass="code">load</span> API soon after/before <spanclass="code">unload</span>, <spanclass="code">unload</span> param of <spanclass="code">load</span> should be used. Otherwise chart will not be rendered properly because of cancel of animation.</p>
<br>
<p><spanclass="code">done</span> will be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Unload data2 and data3
chart.unload({
ids: ['data2', 'data3']
});</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-flow'>flow</a>
</h3>
<p>Flow data to the chart.</p>
<br>
<p>By this API, you can append new data points to the chart.</p>
<p>If <spanclass="code">json</span>, <spanclass="code">rows</span> and <spanclass="code">columns</span> given, the data will be loaded. If data that has the same target id is given, the chart will be appended. Otherwise, new target will be added. One of these is required when calling. If <spanclass="code">json</span> specified, <spanclass="code">keys</span> is required as well as <ahref="#data-json">data.json</a></p>
<br>
<p>If <spanclass="code">to</span> is given, the lower x edge will move to that point. If not given, the lower x edge will move by the number of given data points.</p>
<br>
<p>If <spanclass="code">length</span> is given, the lower x edge will move by the number of this argument.</p>
<br>
<p>If <spanclass="code">duration</span> is given, the duration of the transition will be specified value. If not given, <ahref="#transition-duration">transition.duration</a> will be used as default.</p>
<br>
<p>If <spanclass="code">done</span> is given, the specified function will be called when flow ends.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// 2 data points will be apprended to the tail and popped from the head.
// After that, 4 data points will be appended and no data points will be poppoed.
<p>By this API, you can select data points. To use this API, <ahref="#data-selection-enabled">data.selection.enabled</a> needs to be set <code>true</code>.</p>
<p>If this argument is set <code>true</code>, the data points that are not specified by <spanclass="code">ids</span>, <spanclass="code">indices</span> will be unselected.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// all data points of data1 will be selected.
chart.select(['data1']);
// 3 data points on index 1, 3, 5 of data1 will be selected.
chart.select(['data1'], [1,3,5]);</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-unselect'>unselect</a>
</h3>
<p>Change data point state to unselected.</p>
<br>
<p>By this API, you can unselect data points. To use this API, <ahref="#data-selection-enabled">data.selection.enabled</a> needs to be set <code>true</code>.</p>
<p>Specify indices to be unselected. If this argument is not given, all data points will be the candidate.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// all data points of data1 will be unselected.
chart.unselect(['data1']);
// 3 data points on index 1, 3, 5 of data1 will be unselected.
chart.unselect(['data1'], [1,3,5]);</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-selected'>selected</a>
</h3>
<p>Get selected data points.</p>
<br>
<p>By this API, you can get selected data points information. To use this API, <ahref="#data-selection-enabled">data.selection.enabled</a> needs to be set <code>true</code>.</p>
<p><spanclass="code">grids</span> <code>Array</code> or <code>Object</code></p>
<p>New x grid lines will be added. The format of this argument is the same as <ahref="#grid-x-lines">grid.x.lines</a> and it's possible to give an <code>Object</code> if only one line will be added.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Add a new x grid line
<p>This argument should include <spanclass="code">value</span> or <spanclass="code">class</span>. If <spanclass="code">value</span> is given, the x grid lines that have specified x value will be removed. If <spanclass="code">class</span> is given, the x grid lines that have specified class will be removed. If <spanclass="code">args</span> is not given, all of x grid lines will be removed.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// x grid line on x = 2 will be removed
chart.xgrids.remove({value: 2});
// x grid lines that have 'grid-A' will be removed
<p><spanclass="code">grids</span> <code>Array</code> or <code>Object</code></p>
<p>New y grid lines will be added. The format of this argument is the same as <ahref="#grid-y-lines">grid.y.lines</a> and it's possible to give an <code>Object</code> if only one line will be added.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Add a new y grid line
<p>This argument should include <spanclass="code">value</span> or <spanclass="code">class</span>. If <spanclass="code">value</span> is given, the y grid lines that have specified y value will be removed. If <spanclass="code">class</span> is given, the y grid lines that have specified class will be removed. If <spanclass="code">args</span> is not given, all of y grid lines will be removed.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// y grid line on y = 200 will be removed
chart.ygrids.remove({value: 200});
// y grid lines that have 'grid-A' will be removed
<p><spanclass="code">regions</span> <code>Array</code> or <code>Object</code></p>
<p>New region will be added. The format of this argument is the same as <ahref="#regions">regions</a> and it's possible to give an <code>Object</code> if only one region will be added.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Add a new region
<p>This argument should include <spanclass="code">classes</span>. If <spanclass="code">classes</span> is given, the regions that have one of the specified classes will be removed. If <spanclass="code">args</span> is not given, all of regions will be removed.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// regions that have 'region-A' or 'region-B' will be removed.
<p>If this argument is given, the names of data will be updated. If not given, the current names will be returned. The format of this argument is the same as <ahref="#data-names">data.names</a>.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Get current names
chart.data.names();
// Update names
chart.data.names({
data1: 'New Name 1',
data2: 'New Name 2'
});</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-data-colors'>data.colors</a>
</h3>
<p>Get and set colors of the data loaded in the chart.</p>
<p>If this argument is given, the colors of data will be updated. If not given, the current colors will be returned. The format of this argument is the same as <ahref="#data-colors">data.colors</a>.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Get current colors
chart.data.colors();
// Update colors
chart.data.colors({
data1: '#FFFFFF',
data2: '#000000'
});</code></pre>
</div>
</section>
<hr>
<section>
<h3>
<ahref='#api-data-axes'>data.axes</a>
</h3>
<p>Get and set axes of the data loaded in the chart.</p>
<p>If this argument is given, the axes of data will be updated. If not given, the current axes will be returned. The format of this argument is the same as <ahref="#data-axes">data.axes</a>.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Get current axes
<p>If <spanclass="code">x</span> is given, x values of every target will be updated. If no argument is given, current x values will be returned as an <code>Object</code> whose keys are the target ids.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Get current x values
<p>If <spanclass="code">xs</span> is given, specified target's x values will be updated. If no argument is given, current x values will be returned as an <code>Object</code> whose keys are the target ids.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Get current x values
<p>If <spanclass="code">min</span> is given, specified axis' min value will be updated. If no argument is given, the current min values for each axis will be returned.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Update axis' min
<p>If <spanclass="code">max</span> is given, specified axis' max value will be updated. If no argument is given, the current max values for each axis will be returned.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Update axis' max
<p>If <spanclass="code">range</span> is given, specified axis' min and max value will be updated. If no argument is given, the current min and max values for each axis will be returned.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Update axis' min and max values
<p><spanclass="code">targetIds</span> <code>Array</code> or <code>String</code></p>
<p>If <spanclass="code">targetIds</span> is given, specified target's legend will be shown. If only one target is the candidate, <code>String</code> can be passed. If no argument is given, all of target's legend will be shown.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Show legend for data1.
<p><spanclass="code">targetIds</span> <code>Array</code> or <code>String</code></p>
<p>If <spanclass="code">targetIds</span> is given, specified target's legend will be hidden. If only one target is the candidate, <code>String</code> can be passed. If no argument is given, all of target's legend will be hidden.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Hide legend for data1.
<p>If <spanclass="code">domain</span> is given, the chart will be zoomed to the given domain. If no argument is given, the current zoomed domain will be returned.</p>
<h5>Example:</h5>
<divclass='sourcecode'>
<pre><codeclass='html javascript'>// Zoom to specified domain
<p>If <spanclass="code">enabled</span> is <code>true</code>, the feature of zooming will be enabled. If <code>false</code> is given, it will be disabled.</p>
