Custom Elements

Show Demo List

Theme:

Demo
View Source
API Reference

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Custom Element Chart Pie Series with Legend</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <meta name="description" content="This is an example of Custom Element Chart Pie Series with Legend. In order to show the legend you have to set the showLegend setting to true." />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <script>        var source =            {                datatype: 'csv',                datafields: [                    { name: 'Browser' },                    { name: 'Share' }                ],                url: '../sampledata/mobile_browsers_share_dec2011.txt'            };        var dataAdapter = new jqx.dataAdapter(source);        JQXElements.settings['chartSettings'] = {            title: 'Mobile browsers share',            description: '(source: wikipedia.org)',            enableAnimations: true,            showLegend: true,            showBorderLine: true,            legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },            padding: { left: 5, top: 5, right: 5, bottom: 5 },            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },            source: dataAdapter,            colorScheme: 'scheme03',            seriesGroups:            [                {                    type: 'pie',                    showLabels: true,                    series:                    [                        {                            dataField: 'Share',                            displayText: 'Browser',                            labelRadius: 170,                            initialAngle: 15,                            radius: 145,                            centerOffset: 0,                            formatFunction: (value) => {                                if (isNaN(value))                                    return value;                                return parseFloat(value) + '%';                            },                        }                    ]                }            ]        };    </script></head><body>   <jqx-chart settings="chartSettings" style="width:850px; height:500px"></jqx-chart>    <div class="example-description">        <br />        <h2>Description</h2>        <br />        This is an example of Custom element Chart Pie Series with Legend. In order to show the legend you have to set the showLegend setting to true. You can also see how to format the layout of the legend via the legendLayout setting.    </div>        </body></html>

title string Chart title

Sets or gets the title property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"My Title", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

description string Description

Sets or gets the description property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"My Description",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

source object []

Sets or gets the source property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

showBorderLine boolean true

Sets or gets the showBorderLine property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",showBorderLine:false           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

borderLineColor string #888888

Sets or gets the borderLineColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", borderLineColor:"'#111888'"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

borderLineWidth number 1

Sets or gets the borderLineWidth property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",borderLineWidth:3           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

backgroundColor string #FFFFFF

Sets or gets the backgroundColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", backgroundColor:"#FFFFFF"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

backgroundImage string ''

Sets or gets the backgroundImage property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", backgroundImage:"../images/chart_background.jpg"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

showLegend boolean true

Sets or gets the showLegend property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

legendLayout object {}

Sets or gets the legendLayout property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", legendLayout:legendLayout           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

categoryAxis object {}

Sets or gets the categoryAxis property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", categoryAxis:"categoryAxis"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

padding object {left: 5, top: 5, right: 5, bottom: 5}

Sets or gets the padding property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

titlePadding object {left: 2, top: 2, right: 2, bottom: 2}

Sets or gets the titlePadding property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

colorScheme string scheme01

Sets or gets the colorScheme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme03", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

greyScale boolean false

Sets or gets the greyScale property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",greyScale:true           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

showToolTips boolean true

Sets or gets the showToolTips property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",showToolTips:false           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

toolTipShowDelay number 500

Sets or gets the toolTipShowDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",toolTipShowDelay:300           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

toolTipHideDelay number 4000

Sets or gets the toolTipHideDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",toolTipHideDelay:300           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

toolTipMoveDuration number 300

Sets or gets the toolTipMoveDuration property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",toolTipMoveDuration:200           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

drawBefore function null

Sets or gets the drawBefore property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", drawBefore:"drawBefore"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

draw function null

Sets or gets the draw property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", draw:"draw"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",rtl:true           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

enableCrosshairs boolean false

Sets or gets the enableCrosshairs property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",enableCrosshairs:false           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

crosshairsColor string #888888

Sets or gets the crosshairsColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", crosshairsColor:"'#111888'"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

crosshairsDashStyle string 2,2

Sets or gets the crosshairsDashStyle property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", crosshairsDashStyle:"'1,1'"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

crosshairsLineWidth number 1

Sets or gets the crosshairsLineWidth property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",crosshairsDashStyle:true,crosshairsLineWidth:2           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

columnSeriesOverlap boolean false

Sets or gets the columnSeriesOverlap property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",columnSeriesOverlap:true           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

enabled boolean true

Sets or gets the enabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",enabled:false           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

enableAnimations boolean true

Sets or gets the enableAnimations property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:false, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

animationDuration number 500

Sets or gets the animationDuration property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",animationDuration:1500           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

enableAxisTextAnimation boolean false

Sets or gets the enableAxisTextAnimation property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light",enableAxisTextAnimation:true           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

renderEngine string auto

Sets or gets the renderEngine property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light", renderEngine:"HTML5"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

xAxis object null

Sets or gets the xAxis property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

valueAxis object null

Sets or gets the valueAxis property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

seriesGroups array null

Sets or gets the seriesGroups property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

toggle Event

Code examples

Bind to the toggle event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("toggle", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

click Event

Code examples

Bind to the click event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("click", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

mouseOver Event

Code examples

Bind to the mouseOver event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("mouseOver", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

mouseOut Event

Code examples

Bind to the mouseOut event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("mouseOut", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

refreshBegin Event

Code examples

Bind to the refreshBegin event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("refreshBegin", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

refreshEnd Event

Code examples

Bind to the refreshEnd event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("refreshEnd", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

rangeSelectionChanging Event

Code examples

Bind to the rangeSelectionChanging event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("rangeSelectionChanging", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

rangeSelectionChanged Event

Code examples

Bind to the rangeSelectionChanged event of jqxChart.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			title:"Top 5 most populated countries", description:"Statistics for 2018",showLegend:true,enableAnimations:true, padding:padding, titlePadding:titlePadding, source:source, xAxis:xAxis, valueAxis:valueAxis, colorScheme:"scheme01", seriesGroups:seriesGroups, theme:"light"           }	window.onload = function() {		document.querySelector("jqx-chart").addEventListener("rangeSelectionChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getInstance Method

Parameter	Type	Description

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		var result = document.querySelector("jqx-chart").getInstance();								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

refresh Method

Parameter	Type	Description

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").refresh();								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

update Method

Parameter	Type	Description

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").update();								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

destroy Method

Parameter	Type	Description

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").destroy();								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

addColorScheme Method

Parameter	Type	Description
schemeName	string
colors

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").addColorScheme('scheme99',['#722694', '#AA4643', '#89A54E', '#71588F', '#4198AF']);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

removeColorScheme Method

Parameter	Type	Description
schemeName	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").removeColorScheme('scheme01');								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getItemsCount Method

Parameter	Type	Description
groupIndex	number
serieIndex	number

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getItemsCount(0,1,0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getItemCoord Method

Parameter	Type	Description
groupIndex	number
serieIndex	number
itemIndex	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getItemCoord(0,1,0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getXAxisRect Method

Parameter	Type	Description
groupIndex	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getXAxisRect(0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getXAxisLabels Method

Parameter	Type	Description
groupIndex	number

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getXAxisLabels(0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getValueAxisRect Method

Parameter	Type	Description
groupIndex	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getValueAxisRect(0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getValueAxisLabels Method

Parameter	Type	Description
groupIndex	number

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getValueAxisLabels(0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getColorScheme Method

Parameter	Type	Description
colorScheme	string

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getColorScheme('scheme01');								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

hideSerie Method

Parameter	Type	Description
groupIndex	number
serieIndex	number
itemIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").hideSerie(0,1,0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

showSerie Method

Parameter	Type	Description
groupIndex	number
serieIndex	number
itemIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").showSerie(0,1,0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

hideToolTip Method

Parameter	Type	Description
hideDelay	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").hideToolTip(100);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

showToolTip Method

Parameter	Type	Description
groupIndex	number
serieIndex	number
itemIndex	number
showDelay	number
hideDelay	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").showToolTip(0,0,0,100,100);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

saveAsJPEG Method

Parameter	Type	Description
fileName	string
exportServerUrl	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").saveAsJPEG('chartImage.jpeg','http://myServer.com');								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

saveAsPNG Method

Parameter	Type	Description
fileName	string
exportServerUrl	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").saveAsPNG('chartImage.png','http://myServer.com');								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

saveAsPDF Method

Parameter	Type	Description
fileName	string
exportServerUrl	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").saveAsPDF('chartImage.pdf','http://myServer.com');								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getXAxisValue Method

Parameter	Type	Description
offset	number
groupIndex	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getXAxisValue(10,0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

getValueAxisValue Method

Parameter	Type	Description
offset	number
groupIndex	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Chart Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxchart.core.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>    <script>		var padding = { left: 20, top: 5, right: 20, bottom: 5 };		var titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };		var source = [			{ Country: 'China', Population: 1347350000, Percent: 19.18 },			{ Country: 'India', Population: 1210193422, Percent: 17.22 },			{ Country: 'USA', Population: 313912000, Percent: 4.47 },			{ Country: 'Indonesia', Population: 237641326, Percent: 3.38 },			{ Country: 'Brazil', Population: 192376496, Percent: 2.74 }		];		var xAxis =		{			dataField: 'Country',			gridLines: { visible: true },			flip: false		};		var valueAxis =		{			flip: true,			labels: {				visible: true,				formatFunction: function (value) {					return parseInt(value / 1000000);				}			}		};		var legendLayout = {	  	    left: 500, top: 140, width: 300, height: 200, flow: 'vertical' 		}		var seriesGroups =		[			{				type: 'column',				orientation: 'horizontal',				columnsGapPercent: 50,				toolTipFormatSettings: { thousandsSeparator: ',' },				series: [					{ dataField: 'Population', displayText: 'Population (millions)' }				]			}		];        JQXElements.settings["chartSettings"] = {			           }	window.onload = function() {		document.querySelector("jqx-chart").getValueAxisValue(10,0);								}    </script></head><body>   <jqx-chart settings="chartSettings"></jqx-chart></body></html>

Custom Elements

Custom Elements

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods