Namespace: cq-chartcontrol-group

WebComponents. cq-chartcontrol-group

Creates a <cq-chartcontrol-group> web component. The chart control group is a wrapper element for chart UI controls, enabling the controls to be placed on top of the chart.

Note: The cq-marker attribute must be added to the element to place it within the chart area. The element will sit above the chart bars.

Since:
  • 7.3.0

Example

<cq-chartcontrol-group cq-marker>
	<cq-menu class="ciq-search">
		<cq-lookup cq-keystroke-claim cq-uppercase>
			<cq-lookup-input cq-no-close>
				<input type="text" spellcheck="off" autocomplete="off" autocorrect="off" autocapitalize="off" name="symbol" placeholder="">
				<cq-lookup-icon></cq-lookup-icon>
			</cq-lookup-input>
			<cq-lookup-results>
				<cq-lookup-filters cq-no-close>
					<cq-filter class="true">ALL</cq-filter>
					<cq-filter>STOCKS</cq-filter>
					<cq-filter>FX</cq-filter>
					<cq-filter>INDEXES</cq-filter>
					<cq-filter>FUNDS</cq-filter>
					<cq-filter>FUTURES</cq-filter>
				</cq-lookup-filters>
				<cq-scroll></cq-scroll>
			</cq-lookup-results>
		</cq-lookup>
	</cq-menu>
	<cq-toggle class="ciq-draw"><span></span><cq-tooltip>Draw</cq-tooltip></cq-toggle>
	<cq-toggle class="ciq-CH" cq-member="crosshair"><span></span><cq-tooltip>Crosshair</cq-tooltip></cq-toggle>
	<cq-menu class="ciq-menu ciq-period">
		<span><cq-clickable stxbind="Layout.periodicity">1D</cq-clickable></span>
		<cq-menu-dropdown>
			<cq-item stxtap="Layout.setPeriodicity(1,1,'day')">1 D</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,1,'week')">1 W</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,1,'month')">1 Mo</cq-item>
			<cq-separator></cq-separator>
			<cq-item stxtap="Layout.setPeriodicity(1,1,'minute')">1 Min</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,5,'minute')">5 Min</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,10,'minute')">10 Min</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(3,5,'minute')">15 Min</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,30,'minute')">30 Min</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(2,30,'minute')">1 Hour</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(8,30,'minute')">4 Hour</cq-item>
			<cq-separator></cq-separator>
			<cq-item stxtap="Layout.setPeriodicity(1,1,'second')">1 Sec</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,10,'second')">10 Sec</cq-item>
			<cq-item stxtap="Layout.setPeriodicity(1,30,'second')">30 Sec</cq-item>
			<cq-separator></cq-separator>
			<cq-item stxtap="Layout.setPeriodicity(1,250,'millisecond')">250 MSec</cq-item>
		</cq-menu-dropdown>
	</cq-menu>
</cq-chartcontrol-group>