This is a custom HtmlElement (Web Component). The tag name is the following:
A chart container component that loads a chart template and signals that it is ready for a chart instance creation. This component handles the setup of transient UI elements (dialogs, color pickers) and dispatches an event when the chart is ready for configuration.
Attributes
| attribute | description |
|---|---|
| tmpl-src | Specifies a template source file that contains the chart user interface elements. |
| symbol | Provides the primary chart symbol. Symbol is used if chart is not restored from previously saved state. |
| env-container | Identifies an HTML DOM node (for example "body") that is used to contain transient user interface elements such as dialog boxes and color pickers. Defaults to "body". |
| no-save | Marker attribute. When present, prevents the chart from restoring state from local storage. |
| cq-event-flag | Marker attribute set by the component after dispatching the ready event. Enables the container element to be identified so that an event handler can be called for the element. See the sample-template-multi-charts.html template for an example. |
| attached | Marker attribute set by the component to indicate it has been initialized. |
Emitters
A custom event will be emitted by the component when the chart has been loaded and is ready for configuration. See CIQ.UI.BaseComponent#emitCustomEvent for details on how to listen for this event. The details of the event contain the following:
| property | value |
|---|---|
| emitter | this component |
| cause | "load" |
| effect | "ready" |
| action | null |
| node | reference to this InstantChart element |
| params | configuration parameters object (addOn on/off overrides: extendedHours, rangeSlider, inactivityTimer, fullScreen as well as initialSymbol and restore setting) |
Note: For backward compatibility, this component also dispatches a native signal-chart-ready event
on the document body. Event listeners typically run a handler that configures the chart.
.svg)
<div class="column left"><cq-instant-chart tmpl-src="examples/templates/partials/sample-template-advanced-context.html" id="chart0" symbol="AAPL"></cq-instant-chart></div>
<div class="column right"><cq-instant-chart tmpl-src="examples/templates/partials/sample-template-advanced-context.html" id="chart1" symbol="MSFT"></cq-instant-chart></div>