API Reference

Namespace: cq-chart-title

WebComponents. cq-chart-title

Chart Title web component <cq-chart-title>.

Note, if the cq-marker is added to the element, and it is placed within the chartArea, the element will sit above the chart bars.

<cq-symbol></cq-symbol> will display chart.symbol.
<cq-symbol-description></cq-symbol-description> will display the chart.symbolDisplay. See CIQ.ChartEngine.Chart#symbolDisplay for details on how to set this value.

Set attribute cq-browser-tab to true in order to get the stock symbol and latest price to update in the browser tab.

Set member previousClose to the prior day's closing price in order to calculate and display change. If previousClose is not set, then iqPrevClose from the dataSet will be the default.
Remember data is loaded asynchronously. Be sure to reset this value once your initial data has been loaded by using the CIQ.ChartEngine.loadChart callback function.

stx.loadChart(symbol, parameters, function(){
     document.querySelector("cq-chart-title").previousClose = yesterdays-closing-price;

The cq-animate attribute in the cq-current-price element can be used to change the price color to red or green based on the previous value. Setting the attribute to "fade" will introduce a transition effect on the price which, while attractive, uses considerable CPU when there are rapid updates.

  • 06-15-16
  • 4.0.0 Browser tab now updates with stock symbol and latest price using cq-browser-tab attribute.
  • 6.3.0 Negative close values are "N/A" change percentage.
  • 6.3.0 Child tag <cq-todays-change-pct> is now optional.


		<cq-current-price cq-animate></cq-current-price>
			<div class="ico"></div> <cq-todays-change></cq-todays-change> (
//You can set a more descriptive name by using http://documentation.chartiq.com/CIQ.ChartEngine.Chart.html#symbolDisplay
// and then enabling that on the tile.

//In your HTML file look for:
//and replace it with :

//In your quote feed add the following line:

//Like so:
quotefeed.fetchInitialData=function (symbol, suggestedStartDate, suggestedEndDate, params, cb) {
 var queryUrl = this.url; // using filter:true for after hours

 CIQ.postAjax(queryUrl, null, function(status, response){
  // process the HTTP response from the datafeed
  if(status==200){ // if successful response from datafeed
   params.stx.chart.symbolDisplay=response.fullName; // specify response name
   var newQuotes = quotefeed.formatChartData(response);
   cb({quotes:newQuotes, moreAvailable:true, attribution:{source:"simulator", exchange:"RANDOM"}}); // return the fetched data; init moreAvailable to enable pagination
  } else { // else error response from datafeed
   cb({error:(response?response:status)});	// specify error in callback


previousClose :Float

Keep this value up to date in order to calculate change from yesterday's close

  • Float



Begins the Title helper. This observes the chart and updates the title elements as necessary.


Updates the values in the node