Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Compact Chart
Troubleshooting
Glossary
Reference
JSFiddles

Library Directory Structure

As of version 7.2.0, the root directory structure of the ChartIQ library distribution archive (zip file) is as follows:

Package Folder

  • The chartiq folder contains the complete charting library.
  • The chartiq-x.x.x.tgz tarball contains the library archived in the TAR file format. The tarball enables you to install the library using npm (see Installing with npm).
  • The README.md file contains information about using the library.

Note: Distribution archives of releases prior to 7.2.0 only include the contents of the chartiq folder.

This tutorial describes the contents of the chartiq folder.

Note: Starting with Version 9.0.0, your license key is contained in a keyfile (key.js) in the chartiq

css directory

Contains files related to styling of both the UI and the chart canvas itself. Includes individual SCSS components that compile into the chartiq.css file as well as a CSS map file.

  • fonts directory
  • img directory
  • webcomponents directory
    • Contains scss files that are used to style ChartIQ web components.
  • chartiq.css
    • Required for sample HTML templates. Contains standard styling for ChartIQ UI, addons, and themes.
  • chartiq.scss
    • The master SCSS file, which imports all other SCSS files beginning with underscore. The resulting output file is chartiq.css.
  • normalize.css
    • This is an open source project that sets the baseline "empty page" style for all browsers to a reasonable default. Required for sample HTML templates.
  • page-defaults.css
    • Required for sample HTML templates.
  • stx-chart.css
    • Required for all chart implementations.
  • webcomponents.css
    • SCSS files from the webcomponents directory are combined into this file during build.

examples directory

Includes example interfaces and data used in the sample implementations. It is important to review and adjust all of these items to meet requirements.

  • api
  • data
    • This folder contains sample static data objects to get you started until you have implemented your own quote feed or streaming mechanism.
  • feeds
    • This folder contains sample quotefeed and symbol search implementations, including an interface to our quote feed simulator, so you can test chart functionally without a real quote feed. All sample templates use this simulator by default. This file can be removed once you have developed your own quote feed interface.
  • help
    • Contains the helpContent.js file which is used for configuring help pop-ups.
  • markers
    • This folder contains a sample implementation of chart markers. You will need to either create your own marker implementation to customize the way the markers look and behave, or remove the Events dropdown if present in your template.
  • markets
    • This folder contains a sample market and symbology implementation for a few select markets. Create your own market implementation to define the markets you wish to support, and create a symbology translator to match your data provider.
  • templates
    • This folder contains a variety of HTML sample templates that can be moved to the root directory to use in your implementation. Each template includes a summary of its intended use on the header portion of the file itself. A very simple helloworld.html example template is included in the root directory to get you started.
    • To use a template, copy it into the root directory of the library package.
  • translations
    • This folder contains a sample translation file. A translation file is required only if your implementation will be leveraging the translations facility within the library. See the Localization tutorial for all the details.

js directory

Contains files related to the core library API. Depending on your package, TypeScript Declaration files can also be included in this directory. If you receive an unbundled package, it will include additional folders for unbundled features.

  • addons
    • Note: This folder is included only with our unbundled packages.
  • addOns.js
    • This file contains the additional modules outlined in the API Reference.
  • advanced
    • Note: This folder is included only if your package includes advanced.js and unbundled files. It contains individual files that make up advanced library features and additions in the advanced.js file.
  • advanced.js Note: advanced.js is not included in all packages. Contact your account manager to learn more.
    • File provided in a full library package containing the remainder of the available studies, drawings, chart types, and renderers.
    • Requires standard.js.
  • chartiq.js
    • File containing only the minimal API calls necessary for rendering and managing the most basic chart features.
    • Excludes features such as:
      • quoteFeed
      • drawings
      • studies
      • aggregated chart types (Kagi, Renko, P&F, etc)
      • equation charts
      • shading
      • advanced chart styles (histograms, heatmaps, scatterplots, HLC bars)
      • chart sharing
      • internationalization
      • markers
      • spans and ranges
      • symbol lookup drivers
    • The above features are available as a bundle. See standard.js and advanced.js below.
    • An additional directory containing all feature functionality in individual modular files can be provided upon request to allow your firm to create the perfect package for your needs by incrementally combining chartiq.js with any of the individual files.
  • components-legacy.js
    • Newly re-architected web components were introduced with version 9.1.2. Previous ChartIQ web components are found this file. See the 9.1.2 Release Notes for more information.
  • components.js
    • This file contains all functions linked to the web components used in the sample templates.
  • componentUI.js
  • defaultConfiguration.js
    • This file contains a default chart setup configuration. Modify it by first loading it and then modifying its properties before passing it to the chart creation function.
  • deprecated.js
    • This file contains any functions that have been deprecated. Include this in your project if you need to upgrade and are using deprecated functionality.
  • extras directory
  • standard
    • Note: This folder is included only with our unbundled packages.
  • standard.js
    • This file contains most of the features provided by the library. Some features, such as drawings and studies, provide just some of the types we can provide.
    • Requires chartiq.js.
  • thirdparty directory
  • webcomponents
    • Note: This folder is included only with our unbundled packages.
  • webcomponents_legacy
    • Note: This folder is included only with our unbundled packages.

extras directory

Contains specialized functionality seldom required on implementation.

  • scatterplot directory
    • config.js
      • Provides a generic getConfig function that is used to create a scatterplot configuration.
    • multiDimensionWithTrails.js
      • Extends the getConfig function to create a specific multi-dimensional chart with trails, to be used in sample-template-scatterplot.html.
  • svgcharts directory
    • piechart.js
      • Creates an SVG pie chart using D3.
  • fdc3.js
    • Including this file will allow the implementation to register for FDC3 messaging.
  • hlcbox.js
  • pinnedMarkers.js
    • Including this file enables you to pin a tooltip to the chart when left-clicking a highlighted series.
  • requestLimiter.js
    • Including this file allows you to limit the number of outbound requests to any specific domain. See file header for more details.

thirdparty directory

A set of third-party utilities required to support various features of the core library.

  • emoji-popover.es.js
    • Required for emoji support only.
  • html2canvas.min.js
    • Required for chart sharing support only.
  • perfect-scrollbar.esm.js
    • Required for styling scrolling only.

mobile directory

Required for mobile SDK support only.

  • css directory
  • js directory
    • nativeSdkAccessibility.js
    • nativeSdkBridge.js
  • thirdparty directory
    • hammer.js
  • sample-template-native-sdk.html
    • Move this file into the root directory to use.

modules directory

If included, contains node modules designed to run server-side, such as the study calculator. Can be removed if not needed. See StudyCalculator for installation instructions and detailed examples.

plugins directory

Any additional plugins you may have received with the library package such as Active Trader, scriptIQ, and TFC.

webpack example directory

Webpack bundling example of the charting library together with an advanced template.

  • Use the webpack-example directory if you are utilizing webpack 5.
  • The directory includes a webpack.config.js file along with a package.json file.
  • Use as an example and adjust as needed for your particular needs, or remove if not using webpack.

Next steps