Custom Elements

Show Demo List

<!DOCTYPE html>

<html lang="en">

<head>

<title id='Description'>BarGauge Custom Element UpdateValues</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="In this example of Custom Element BarGauge, the user controls the proportion between Red, Green and Blue." />

Properties

animationDuration

number

1000

Sets or gets the animationDuration property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150,animationDuration:500, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

backgroundColor

string

#e0e0e0

Sets or gets the backgroundColor property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, backgroundColor:"red", theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

barSpacing

number

Sets or gets the barSpacing property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150,barSpacing:12, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

baseValue

number

null

Sets or gets the baseValue property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150,baseValue:30, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

colorScheme

string

scheme01

Sets or gets the colorScheme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, colorScheme:"scheme02", theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

customColorScheme

string

scheme01

Sets or gets the customColorScheme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, colorScheme:"colorScheme", customColorScheme:'{"name":"colorScheme","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}', theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150,disabled:true, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

endAngle

number

Sets or gets the endAngle property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150,endAngle:180, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

formatFunction

object

null

Sets or gets the formatFunction property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, formatFunction:"formatFunction", theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

height

number

400

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

labels

object

null

Sets or gets the labels property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light", labels:labels	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

max

number

100

Sets or gets the max property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:60, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

min

number

Sets or gets the min property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light",min:-25	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

relativeInnerRadius

number

0.3

Sets or gets the relativeInnerRadius property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light",relativeInnerRadius:0	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

rendered

function

null

Sets or gets the rendered property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light", rendered:"rendered"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

startAngle

number

225

Sets or gets the startAngle property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light",startAngle:200	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

title

object|string

null

Sets or gets the title property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light", title:"title"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

tooltip

object

null

Sets or gets the tooltip property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light", tooltip:"tooltip"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

useGradient

boolean

true

Sets or gets the useGradient property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light",useGradient:false	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

values

array

[]

Sets or gets the values property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

width

number

400

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

drawEnd

Event

Code examples

Bind to the drawEnd event of jqxBarGauge.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").addEventListener("drawEnd", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

drawStart

Event

Code examples

Bind to the drawStart event of jqxBarGauge.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").addEventListener("drawStart", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

initialized

Event

Code examples

Bind to the initialized event of jqxBarGauge.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").addEventListener("initialized", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

tooltipClose

Event

Code examples

Bind to the tooltipClose event of jqxBarGauge.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").addEventListener("tooltipClose", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

tooltipOpen

Event

Code examples

Bind to the tooltipOpen event of jqxBarGauge.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").addEventListener("tooltipOpen", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

valueChanged

Event

Code examples

Bind to the valueChanged event of jqxBarGauge.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		 values:barGaugeValues,width:600,height:600,max:150, theme:"light"	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").addEventListener("valueChanged", function(event) {			// Your code here.		});	};    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

refresh

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		values:"values",width:600,height:600,max:150	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").refresh();								}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

render

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		values:"values",width:600,height:600,max:150	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").render();								}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

val

Method

Parameter	Type	Description
value	array

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>BarGauge 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="../jqwidgets/styles/jqx.light.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/jqxdraw.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbargauge.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>    <script type="text/javascript">     	var barGaugeValues = [11, 22, 33, 55, 88, 143];	 	JQXElements.settings["barGaugeSettings"] =	{		values:"values",width:600,height:600,max:150	}	window.onload = function() {		document.querySelector("jqx-bar-gauge").val([112, 125, 150, 137]);								}    </script></head><body>    <jqx-bar-gauge settings="barGaugeSettings"></jqx-bar-gauge></body></html>

Custom Elements

Custom Elements

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods