9.0.0 to 9.1.2
ChartIQ Version 9.1.2 provides expanded functionality for markers and tooltips, including pinning and dragging, as well as attaching them to non-primary series and adding hyperlinks if they include a text story. Version 9.1.2 also introduces an update to the architecture of our web components. This change has allowed us to increase the accessibility of our library's web components for users who employ screen readers. See the Enhancements section of the Release Notes to learn more about the benefits of this re-architecting, especially for framework developers.
Web component re-architecture
Version 9.1.2 integrates the new, re-architected web components into our sample time-series templates, including Advanced, Basic, Institutional, and Options. Later versions of the library will integrate the new web components into the Multichart and Crossplot templates as well.
The library still includes our legacy web components, so you can continue using them if you wish. Find them in chartiq/js/components-legacy.js. There are a few important limits to keep in mind:
- You cannot mix and match old and new components. It's all or nothing.
- Legacy components will not work with 9.1.2 templates.
- Templates from before 9.1.2 will not work with the new components.
If you want to upgrade to version 9.1.2 and continue to use your templates from before this version, you must also use the legacy components. Use the following instructions for backwards compatibility.
Backwards compatibility of legacy web components with existing templates
-
Remove the following script from around line 20 (depending on the template)
<script src="js/thirdparty/custom-elements.min.js"></script>
-
Import the legacy components after the line importing CIQ
import { CIQ } from "./js/components.js"; import "./js/components-legacy.js"; // Add this line.
-
If you are using SignalIQ, change your signalDialog import to signalDialog-legacy
import "./plugins/signaliq/signaliqDialog-legacy.js";
-
To maintain legacy menu configuration, add a
deprecatedSettings
property to the params object ofgetDefaultConfig
and set it totrue
const config = getDefaultConfig({ markerFeed: marker.MarkersSample, scrollStyle: PerfectScrollbar, quoteFeed: quotefeed, nameValueStore: CIQ.NameValueStore, deprecatedSettings: true // Add this line. });
Using legacy web components with existing Multichart and Crossplot templates
The Multichart and Crossplot templates have not yet incorporated the new web component architecture that Version 9.1.2 introduces. The included Multichart and Crossplot templates have been adjusted to continue using the legacy web components in a similar manner to the instructions in the above section. Simply compare the new sample template with your existing template and migrate the changes over.
Information displayed in a tooltip
The active chart type now dictates what data is displayed within the tooltip. If you wish to maintain the legacy behavior, you can easily do so by customizing the chart configuration object in your html template. After you declare the variable config
, simply add the following:
config.addOns.tooltip = {
ohl: true,
volume: true,
series: true,
studies: true
};
This way, your series tooltips will display the open, high, low, and close prices, as well as current volume, regardless of chart type. Refer to the chart configuration tutorial for more on how to customize the configuration object.