The chart legend web component <cq-chart-legend>
.
An encapsulation of the markup for the chart (or study) legend.
Use the cq-marker
attribute to ensure that the legend floats inside the chart. Set the
optional cq-panel-only
attribute so that only studies from the panel containing the
legend are displayed. Set the optional cq-clone-to-panels
attribute to create a legend
on each panel.
The legend shows both studies and comparisons, so the cq-content-keys
attribute should
include cq-label
for studies and cq-comparison-label
for comparisons.
- Since:
-
7.5.0
Example
<cq-study-legend cq-chart-legend cq-marker-label="Plots" cq-clone-to-panels="Plots" cq-panel-only cq-marker cq-hovershow
cq-content-keys="cq-label,cq-comparison-label">
<cq-comparison>
<cq-comparison-key cq-panel-only cq-all-series>
<template cq-comparison-item>
<cq-comparison-item>
<cq-swatch cq-overrides="auto"></cq-swatch>
<cq-comparison-label>AAPL</cq-comparison-label>
<!-- cq-comparison-price displays the current price with color animation -->
<cq-comparison-price cq-animate></cq-comparison-price>
<!-- cq-comparison-tick-price displays the price for the active crosshair item -->
<!-- <cq-comparison-tick-price></cq-comparison-tick-price> -->
<cq-comparison-loader></cq-comparison-loader>
<div class="stx-btn-ico ciq-close"></div>
</cq-comparison-item>
</template>
</cq-comparison-key>
</cq-comparison>
<template cq-study-legend>
<cq-item>
<cq-label></cq-label>
<span class="ciq-edit"></span>
<div class="ciq-icon ciq-close"></div>
</cq-item>
</template>
</cq-study-legend>
Methods
-
setContext()
-
Adds the default markup.
- Since:
-
7.5.0