jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
916 lines (888 loc) • 155 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcore.js"></script>
<meta name="keywords" content="jQuery, Chart, Chart plugin, Data Visualization, Help Documentation, jQuery Chart, JavaScript Chart, jQuery Mobile Chart, JavaScript Mobile Chart, Charting" />
<meta name="description" content="This page represents the help documentation of the jqxChart widget." />
<title>jqxChart API Reference</title>
<script type="text/javascript">
$(document).ready(function ()
{
$(".documentation-option-type-click").click(function (event)
{
var match = $(event.target).parents('tr').next().find(".property-content");
if (match && match.data('expanded'))
{
match.hide();
match.data('expanded', false);
}
else
{
match.show();
match.data('expanded', true);
}
//$(event.target).parents('tr').next().find(".property-content").hide();
});
});
</script>
</head>
<body>
<div id="properties">
<h2>Properties</h2>
<table class="documentation-table" style="padding-bottom: 20px;">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<!-- animationDuration -->
<tr>
<td class="documentation-option-type-click">
<span>animationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>1000
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the animations duration in milliseconds. The value must be between 0 and 5000.
If it is outside of this range jqxChart will reset it to the default value of 1000.
</p>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CXrxS/">animationDuration is set to 1000</a>
</div>
</div>
</td>
</tr>
<!-- end of animationDuration -->
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>borderLineColor</span>
</td>
<td>
<span>String</span>
</td>
<td>#888888
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the chart's border color.
</p>
Example:
<pre>
<code>
// select the chart element and change the default border color.
$('#jqxChart').jqxChart({borderLineColor: 'Blue'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DDKEZ/">borderLineColor is set to 'blue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>borderLineWidth</span>
</td>
<td>
<span>Number</span>
</td>
<td>1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the chart's border line width
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart({borderLineWidth: 1});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8kVXG/">borderLineWidth is set to 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>backgroundColor</span>
</td>
<td>
<span>String</span>
</td>
<td>White
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the chart's background color.
</p>
Example:
<pre>
<code>
// select the chart element and change the default background color.
$('#jqxChart').jqxChart({backgroundColor: 'Gray'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7wQzp/">backgroundColor is set to 'silver'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>backgroundImage</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the chart's background image.
</p>
Example:
<pre>
<code>
// select the chart element and set background image.
$('#jqxChart').jqxChart({backgroundImage: '../images/chart_background.jpg'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ebHwC/">backgroundImage is set to a custom string</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>colorScheme</span>
</td>
<td>
<span>String</span>
</td>
<td>'scheme01'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the chart's color pallete. jqxChart suppports 11 color schemes from 'scheme01'
to 'scheme11'.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart({colorScheme: 'scheme06'});
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zZUTA/">colorScheme is set to 'scheme11'</a>
</div>
</div>
</td>
</tr>
<!-- crosshairsDashStyle -->
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>crosshairsDashStyle</span>
</td>
<td>
<span>String</span>
</td>
<td>'2,2'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart('crosshairsDashStyle', '1,1'});
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q2XsW/">crosshairsDashStyle is set to '2,2'</a>
</div>
</div>
</td>
</tr>
<!-- crosshairsLineWidth -->
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>crosshairsLineWidth</span>
</td>
<td>
<span>Number</span>
</td>
<td>1.0
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets or sets the width of the crosshairs lines.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart('crosshairsLineWidth', 2.0});
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UYPV8/">crosshairsLineWidth is set to 1.5</a>
</div>
</div>
</td>
</tr>
<!-- columnSeriesOverlap -->
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>columnSeriesOverlap</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables overlapping of the column series.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart('columnSeriesOverlap', true});
</code>
</pre>
</div>
</td>
</tr>
<!-- crosshairsColor -->
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>crosshairsColor</span>
</td>
<td>
<span>String</span>
</td>
<td>#888888
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets or sets the color of the crosshairs lines.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart('crosshairsColor', '#AA55AA'});
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/anVxx/">crosshairsColor is set to '#888888'</a>
</div>
</div>
</td>
</tr>
<!-- draw -->
<tr>
<td class="documentation-option-type-click">
<span>draw</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the drawing function of jqxChart.
When the property is set, you can override the jqxChart's drawing.
</p>
Example:
<pre><code>
var chartSettings = {
title: "Map of the European Union",
description: "",
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter
};
// custom drawing function after
chartSettings.draw = function (renderer, rect) {
var records = this.source.records;
var wScale = rect.width / 13000
var hScale = (rect.height) / 8500;
for (var i = 0; i < records.length; i++) {
var path = transformPath(records[i].path, wScale, hScale, 62, 22);
var pathElement = renderer.path(path, { stroke: 'black' });
if (records[i].eu == "true") {
renderer.attr(pathElement, { fill: 'blue' });
}
else
renderer.attr(pathElement, { fill: '#DEDEDE' });
}
}
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LcFMV/">draw is set to custom function</a>
</div>
</div>
</td>
</tr>
<!-- end of draw -->
<!-- drawBefore -->
<tr>
<td class="documentation-option-type-click">
<span>drawBefore</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
function for custom drawing before the title and other chart elements
</p>
Example:
<pre><code>
var chartSettings = {
title: "Map of the European Union",
description: "",
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter
};
// function draw before the title and other chart elements
chartSettings.drawBefore = function (renderer, rect) {
renderer.rect(rect.x, rect.y, rect.width, rect.height, { fill: 'lightblue' });
}
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LcFMV/">drawBefore is set to custom function</a>
</div>
</div>
</td>
</tr>
<!-- end of drawBefore -->
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>description</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the description text of the chart.
</p>
Example:
<pre>
<code>
// select the chart element and change the description to 'New description'
$('#jqxChart').jqxChart({description: 'New description'});
// refresh the chart element
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mDY2E/">description is set to "Statistics for 2011"</a>
</div>
</div>
</td>
</tr>
<!-- enableCrosshairs -->
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>enableCrosshairs</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart(enableCrosshairs', false);
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rQ7MS/">enableCrosshairs is set to true</a>
</div>
</div>
</td>
</tr>
<!-- enabled -->
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>enabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets or sets whether the chart widget in enabled or disabled state.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart({enabled: false});
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/V8ZUc/">enabled is set to false</a>
</div>
</div>
</td>
</tr>
<!-- enableAnimations -->
<tr>
<td class="documentation-option-type-click">
<span>enableAnimations</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style="width: 100%">
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines if the animations are enabled. When you set this property it will turn on or off the animations
for all series in all seriesGroups in the chart. You can override this property for individual seriesGroups and series.
</p>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bf8gK/">enableAnimations is set to true</a>
</div>
</div>
</td>
</tr>
<!-- end of enableAnimations -->
<!-- enableAxisTextAnimation -->
<tr>
<td class="documentation-option-type-click">
<span>enableAxisTextAnimation</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style="width: 100%">
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines if the animation of the axes text is enabled.
</p>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/28Ktb/">enableAxisTextAnimation is set to true</a>
</div>
</div>
</td>
</tr>
<!-- end of enableAxisTextAnimation -->
<!-- greyScale -->
<tr>
<td class="documentation-option-type-click">
<span>greyScale</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether to display the chart using grey scale colors.
</p>
Example:
<pre><code>
$('#jqxChart').jqxChart({greyScale: true});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/adKKr/">greyScale is set to true</a>
</div>
</div>
</td>
</tr>
<!-- end of greyScale -->
<!-- legendLayout -->
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>legendLayout</span>
</td>
<td>
<span>Object</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets the legend's layout. The expected object is with the following fields:</p>
<ul>
<li>left - legend's X position.</li>
<li>top - legend's Y position.</li>
<li>width - legend's width.</li>
<li>height - legend's height.</li>
<li>flow - 'horizontal' or 'vertical'.</li>
</ul>
Example:
<h4>Code example</h4>
<pre><code>$('#jqxChart').jqxChart({legendLayout : { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' }}); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VAgKr/">legendLayout is set to { left: 535,top: 140,width: 200, height: 200, flow: 'vertical' }</a>
</div>
</div>
</td>
</tr>
<!-- localization -->
<tr>
<td class="documentation-option-type-click">
<span>localization</span>
</td>
<td>
<span>object</span>
</td>
<td>undefined
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
localization object containing culture specific properties required for formatting currencies, numbers and dates
</p>
Example:
<pre><code>
$('#chartContainer').jqxChart({localization: getLocalization('de')});
</code></pre>
</td>
</tr>
<!-- end of localization -->
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>padding</span>
</td>
<td>
<span>Padding</span>
</td>
<td>{ left: 5, top: 5, right: 5, bottom: 5 }
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the left,top, right & bottom padding of the Chart.
</p>
Example:
<pre>
<code>
$('#jqxChart').jqxChart({padding: { left: 10, top: 10, right: 10, bottom: 10 }});
$('#jqxChart').jqxChart('refresh');
</code>
</pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bRHBK/">padding is set to {left: 20,top: 5, right: 20, bottom: 5 }</a>
</div>
</div>
</td>
</tr>
<!-- rtl -->
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets or gets a value indicating whether the Chart's layout is mirrored.</p>
Example:
<h4>Code example</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxChart').jqxChart({rtl : true}); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxChart').jqxChart('rtl'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/K9T9s/">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<!-- renderEngine -->
<tr>
<td class="documentation-option-type-click">
<span>renderEngine</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'.
When the property is not set jqxChart will automatically select an optimal rendering engine depending on the browser capabilities.
</p>
Example:
<pre><code>
$('#jqxChart').jqxChart({renderEngine: 'HTML5'});
$('#jqxChart').jqxChart('refresh');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LJ3vR/">renderEngine is set to 'HTML5'</a>
</div>
</div>
</td>
</tr>
<!-- end of renderEngine -->
<!-- seriesGroups -->
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>seriesGroups</span>
</td>
<td>
<span>Object</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
The seriesGroups property is used to describe all series displayed on the chart. jqxChart supports multiple
series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which
allows you to have values with different scales displayed on the same chart at the same time. It also allows
you to display multiple series types together on the same chart. For example, you can display all series in
one group as lines and the series in a second group as columns.
</p>
<pre><code>
seriesGroups:
[
{
type: 'stackedarea100',
orientation: 'vertical',
series: [
{ dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' },
{ dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
{ dataField: 'Referral', displayText: 'Referral Traffic' }
],
bands:
[
{ minValue: 2000, maxValue: 2500, color: '#FF0000', opacity: 0.15},
{ minValue: 1000, maxValue: 1100, color: '#FF0000', opacity: 0.20}
]
}
]
</code></pre>
<br />
The seriesGroups is an array of objects where each object represents one group. A group may have the following properties:
<br />
<ul>
<li>type - sets the chart type. jqxChart supports several common chart types. You can
easily plot series of different types on a common chart. A type must be specified
for each series group. Currently jqxChart supports the following series types:
<ul>
<li>column - simple column series</li>
<li>stackedcolumn - stacked column series</li>
<li>stackedcolumn100 - percentage stacked columns</li>
<li>rangecolumn - floating column between two values</li>
<li>waterfall - waterfall series</li>
<li>stackedwaterfall - stacked waterfall series</li>
<li>line - simple streight lines connecting the value points</li>
<li>stackedline - stacked lines</li>
<li>stackedline100 - percentage stacked lines</li>
<li>spline - smooth lines connecting the value points</li>
<li>stackedspline - smooth stacked lines</li>
<li>stackedspline100 - percentage stacked smooth lines</li>
<li>stepline - step line</li>
<li>stackedstepline - stacked step line</li>
<li>stackedstepline100 - percentage stacked step line</li>
<li>area - area connecting the value points with streight lines</li>
<li>stackedarea- stacked area with streight lines between the points</li>
<li>rangearea - floating area between pairs of value points</li>
<li>stackedline100 - percentage stacked area</li>
<li>splinearea - smooth area connecting the value points</li>
<li>splinerangearea - smooth floating area between pairs of value points</li>
<li>stackedsplineara - smooth stacked area</li>
<li>stackedsplinearea100 - percentage stacked smooth area</li>
<li>steplinearea - step area connecting the value points</li>
<li>stackedsteplineara - step stacked area</li>
<li>stackedsteplinearea100 - percentage stacked step area</li>
<li>pie - circular chart divided into sectors, illustrating proportion</li>
<li>donut - chart divided into circular sectors with different inner and outer radius</li>
<li>scatter - data is displayed as a collection of points</li>
<li>stackedscatter - data is displayed as a collection of points and the values are stacked</li>
<li>stackedscatter100 - data is displayed as a collection of points and the values are percentage stacked</li>
<li>bubble - data is displayed as a collection of bubbles</li>
<li>stackedbubble - data is displayed as a collection of bubbles and the values are stacked</li>
<li>stackedbubble100 - data is displayed as a collection of bubbles and the values are percentage stacked</li>
<li>candlestick - display candlestick series using open, high, low, close data points</li>
<li>ohlc - display OHLC series using open, high, low, close data points</li>
</ul>
</li>
<li>orientation - specifies the orientation of the series group.
<ul>
<li>vertical - the valueAxis is displayed vertically and the xAxis horizontally.</li>
<li>horizontal - the valueAxis is displayed horizontally and the xAxis vertically</li>
</ul>
</li>
<li>valueAxis - object describing the valueAxis for this group. jqxChart allows you to use a common valueAxis and/or multiple value axes per serie group.</li>
<li>columnsGapPercent - percentage gap between columns within the same serie. The default value is 25.</li>
<li>seriesGapPercent - percentage gap between columns belonging to different series. The default value is 10.</li>
<li>columnsMaxWidth - maximum width of columns in column series.</li>
<li>columnsMinWidth - minimum width of columns in column series.</li>
<li>columnsTopWidthPercent - columns top width (as percentage of the total width). The default value is 100.</li>
<li>columnsBottomWidthPercent - columns bottom width (as percentage of the total width). The default value is 100.</li>
<li>skipOverlappingPoints - determines whether to display overlapping data points in column, ohlc and candlestick series. The default value is true.</li>
<li>polar - a boolean value. When polar is set to 'true' the chart will render in polar coordinates.</li>
<li>spider - a boolean value. When spider is set to 'true' the chart will render in polar coordinates.</li>
<li>radius - the radius of the polar coordinate system. Applicable to polar and spider charts only.</li>
<li>startAngle - the start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.</li>
<li>endAngle - the end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.</li>
<li>offsetX - horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.</li>
<li>offsetY - vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.</li>
<li>series - an array of chart series.<p>Each serie has the following properties:</p>
<ul>
<li>dataField - name of the field in the data source.</li>
<li>displayText - name to display for this serie.</li>
<li>dataFieldOpen, dataFieldHigh, dataFieldLow, dataFieldClose - names of the fields in the data source
used in candlestcik and ohlc series
</li>
<li>displayTextOpen, displayTextHigh, displayTextLow, displayTextClose - names to display for candlestick and ohlc series.</li>
<li>colorScheme - color palette to use when rendering the serie.</li>
<li>color - (Deprecated) fill color for the serie.</li>
<li>lineColor - Line color for the serie.</li>
<li>lineColorSelected - Line color for the serie when selected.</li>
<li>fillColor - Fill color for the serie.</li>
<li>fillColorSelected - Fill color for the serie when selected.</li>
<li>fillColorAlt - Alternating fill color for the serie. Applicable to OHLC series only.</li>
<li>fillColorAltSelected - Alternating fill color for the serie when selected. Applicable to OHLC series only.</li>
<li>lineColorSymbol - Line color for the marker symbols in serie.</li>
<li>lineColorSymbolSelected - Line color for the marker symbols in the serie when selected.</li>
<li>fillColorSymbol - Fill color for the marker symbols in the serie.</li>
<li>fillColorSymbolSelected - Fill color for the the marker symbols in serie when selected.</li>
<li>colorFunction - a custom function that returns the color of a data point.<br />
The function will received the following parameters: dataValue, itemIndex, serie, group<br />
The implementation of the function can return a single color which will be used as a fillColor and<br />
the other colors will be derived or it can return an object containing fillColor, fillColorSelected, etc.
</li>
<li>greyScale - boolean that determines whether to display the serie in grey scale.</li>
<li>legendFormatSettings - legend data formatting settings for the values in the serie.</li>
<li>legendFormatFunction - legend data formatting function for the values in the serie.</li>
<li>legendFillColor - fill color of the legend box. The default value is inherited by the serie's color.</li>
<li>legendLineColor - line color of the legend box. The default value is inherited by the serie's color.</li>
<li>toolTipFormatSettings - tooltip data formatting settings for the values in the serie.</li>
<li>toolTipFormatFunction - tooltip data formatting function for the values in the serie.</li>
<li>toolTipLineColor - determines the tooltip's border lines color.</li>
<li>toolTipBackground - determines the tooltip's background.</li>
<li>toolTipClass - determines the tooltip's CSS class name.</li>
<li>useGradient - determines whether to use color gradients.</li>
<li>opacity - determines the opacity of the items in this serie.</li>
<li>lineWidth - determines the line tickness of the items in this serie.</li>
<li>lineDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2' </li>
<li>emptyPointsDisplay - determines how to display value gaps in line series.
Possible values are: 'connect', 'skip' and 'zero'<br />
</li>
<li>linesUnselectMode - determines how line and area series are unselected based on mouse and touch events. Possible values are 'click' or 'default'.
If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart.
In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.
</li>
<li>symbolType - determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only. Acceptable values are: 'none', 'circle', 'square', 'diamond', 'triangle_up', 'triangle_down', 'triangle_left', 'triangle_right'</li>