API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-study-legend

WebComponents. cq-study-legend

Study legend web component <cq-study-legend>.

Click on the "X" to remove the study. Click on the cog to edit the study. Optionally only show studies needing custom Removal. cq-custom-removal-only Optionally only show overlays. cq-overlays-only Optionally only show studies in this panel. cq-panel-only Optionally clone to all panels. cq-clone-to-panels="Plots" or whatever name you choose Optionally specify selector for which nodes have content. cq-content-keys

Keyboard control

When selected with tab key navigation and activated with Return/Enter, this component has the following internal controls:

  • Up/Down arrow — Move selection between internal cq-item and cq-comparison-item elements.
  • Left/Right arrow — Select a control within a selected cq-item element, such as the Remove button. Child elements must have the attribute keyboard-selectable-child set to "true" to be selectable with these keys.
Since:

  • 8.3.0 Enabled internal keyboard navigation and selection.

Examples

Here is an example of how to create a study legend on the chart. We use the cq-marker attribute to ensure that it floats inside the chart. We set the optional cq-panel-only attribute so that only studies from this panel are displayed. 

<cq-study-legend cq-marker-label="Studies" cq-overlays-only cq-marker cq-hovershow>
	<template>
		<cq-item>
			<cq-label></cq-label>
			<span class="ciq-edit"></span>
			<div class="ciq-icon ciq-close"></div>
		</cq-item>
	</template>
</cq-study-legend>

Here is an example of how to create a study legend inside a drop down menu. We use the cq-no-close attribute so that drop down is not closed when the user removes a study from the list. 

<cq-menu class="ciq-menu ciq-studies collapse">
	<span>Studies</span>
	<cq-menu-dropdown cq-no-scroll>
		<cq-study-legend cq-no-close>
			<cq-section-dynamic>
				<cq-heading>Current Studies</cq-heading>
				<cq-study-legend-content>
					<template cq-study-legend>
						<cq-item>
							<cq-label class="click-to-edit"></cq-label>
							<div class="ciq-icon ciq-close"></div>
						</cq-item>
					</template>
				</cq-study-legend-content>
				<cq-placeholder>
					<div stxtap="Layout.clearStudies()" class="ciq-btn sm">
						Clear All
					</div>
				</cq-placeholder>
			</cq-section-dynamic>
		</cq-study-legend>
		<cq-scroll>
			<cq-studies>
				<cq-studies-content>
					<template>
						<cq-item>
							<cq-label></cq-label>
						</cq-item>
					</template>
				</cq-studies-content>
			</cq-studies>
		</cq-scroll>
	</cq-menu-dropdown>
</cq-menu>

Methods

StudyLegend#launchColorPicker()

If a color-picker is opened within this component, this will make sure the component stays active.

StudyLegend#renderLegend()

Renders the legend based on the current studies in the CIQ.ChartEngine object.