Namespace: cq-chart-legend

WebComponents. cq-chart-legend

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-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