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

Library Directory Structure

As of version 7.2.0, the root directory structure of the CharitIQ 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.

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.

  • stx-chart.css
    • Required for all chart implementations.
  • chartiq.css
    • Required for sample HTML templates. Contains standard styling for web components, addons, and themes.
  • 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.
  • font-awesome.css
  • img directory
  • chartiq.scss
    • The master SCSS file, which imports all other SCSS files beginning with underscore. The resulting output file is chartiq.css.

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.

  • 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.
  • 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.

  • 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.
  • 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.
  • advanced.js
    • File provided in a full library package containing the remainder of the available studies, drawings, chart types, and renderers.
    • Requires standard.js.
  • componentUI.js
  • components.js
    • This file contains all functions linked to the web components used in the sample templates.
  • addOns.js
    • This file contains the additional modules outlined in the API Reference.
  • 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.
  • 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.

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.

extras directory

Contains specialized functionality seldom required on implementation.

  • hlcbox.js
  • requestLimiter.js
    • Including this file allows you to limit the number of outbound requests to any specific domain. See file header for more details.

mobile directory

Required for mobile SDK support only.

  • thirdparty directory
    • hammer.js
  • nativeSdkAccessibility.js
  • nativeSdkBridge.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 directories

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

  • Use the webpack-example directory if you are using webpack 5.
  • Use the webpack4-example directory if you are using webpack 4.
  • Each 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