Activate the "chart title" web component

This jsfiddle shows how to use a chart title web component

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart8.0/css/chartiq.css" />

<cq-context>
  <div class="chartContainer" style="width:100%;height:460px;position:relative;">
    <cq-chart-title cq-marker cq-browser-tab></cq-chart-title>
  </div>
</cq-context>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>

CSS

cq-context cq-chart-title cq-menu.ciq-period {
  display: none;
}

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/standard.js";
import "https://jsfiddle.chartiq.com/chart/js/componentUI.js";
import "https://jsfiddle.chartiq.com/chart/js/components.js"

// instantiate a chart engine 
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  layout: {
  	/* periodicity: 1,
  	    interval: 'second'   */  
  }
});

// register the web components
CIQ.UI.ensureComponentsRegistered();

// initialize the UI context
new CIQ.UI.Context(stxx, document.querySelector("cq-context,[cq-context]"));

//Now load a chart with it's data
stxx.loadChart(
  "SPY", [    {"Date":"1997-07-16T19:20:40.0000Z","Open":151.79,"High":151.8,"Low":151.6,"Close":151.75,"Volume":1817706},
    {"Date":"1997-07-16T19:20:45.0000Z","Open":151.74,"High":151.96,"Low":151.74,"Close":151.84,"Volume":2127911},
    {"Date":"1997-07-16T19:20:50.0000Z","Open":151.84,"High":152.03,"Low":151.79,"Close":151.95,"Volume":1640306},
    {"Date":"1997-07-16T19:20:55.0000Z","Open":151.95,"High":152.09,"Low":151.84,"Close":152.07,"Volume":1420396},
    {"Date":"1997-07-16T19:21:00.0000Z","Open":152.07,"High":152.08,"Low":151.87,"Close":151.91,"Volume":1312368},
    {"Date":"1997-07-16T19:21:05.0000Z","Open":151.92,"High":152.02,"Low":151.88,"Close":151.95,"Volume":1351448},
    {"Date":"1997-07-16T19:21:10.0000Z","Open":151.95,"High":152.02,"Low":151.87,"Close":151.98,"Volume":1171601},
    {"Date":"1997-07-16T19:21:15.0000Z","Open":151.97,"High":151.99,"Low":151.72,"Close":151.73,"Volume":1340956},
], 
 
);

window.stxx = stxx;