Namespace: cq-tradehistory

WebComponents. cq-tradehistory

Trade History web component <cq-tradehistory>.

Displays a table of trade information from CIQ.ChartEngine.Chart#currentMarketData.

The following data should exist in the data record sent to either CIQ.ChartEngine#updateCurrentMarketData or CIQ.ChartEngine#updateChartData:

  • Last or Close
  • LastSize
  • LastTime (this will default to DT if omitted)

Requires Active Trader plugin. See CIQ.ChartEngine#updateCurrentMarketData for data requirements

This component will take up 100% of its parent element.

Use component's open() and close() methods to show and hide.

Visual Reference:

  • 6.2.0


This is your chart container. Position it anywhere, and in any way that you wish on your webpage.
Make position relative for the chart container div element.
<div class="chartContainer" style="width:800px;height:460px;position:relative;">
    <cq-tradehistory cq-active>
            <cq-scroll cq-no-claim>
                <cq-tradehistory-body maxrows=500></cq-tradehistory-body>
                <div col="qty">Qty</div>
                <div col="price">Price</div>
                <div col="amount">Amount</div>
// Once the component is added to the HTML, it can be activated, and data can be loaded as follows:
let stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });
new CIQ.UI.Context(stxx, document.querySelector("cq-context,[cq-context]"));
stxx.updateCurrentMarketData(yourL2Data); // Call this every time you want refresh.