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.

  • 7.5.0


<cq-study-legend cq-marker-label="Plots" cq-clone-to-panels="Plots" cq-panel-only cq-marker cq-hovershow
        <cq-comparison-key cq-panel-only cq-all-series>
            <template cq-comparison-item>
                    <cq-swatch cq-overrides="auto"></cq-swatch>
                    <!-- 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>    -->
                    <div class="stx-btn-ico ciq-close"></div>
    <template cq-study-legend>
            <span class="ciq-edit"></span>
            <div class="ciq-icon ciq-close"></div>



Adds the default markup.

  • 7.5.0