Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Trading
Time Span Events
Term structures
ScriptIQ
Troubleshooting
Glossary
Reference
JSFiddles

Module Bundlers

Almost all of today's JavaScript frameworks work with some sort of module bundler to combine the files in your project into a single file that can be loaded by the browser. The most popular of these is webpack which is the default choice on major projects like Angular, React, and Vue.js although alternatives do exist. Some can be extended to do more tasks but at a minimum they are usually responsible for loading your license and exposing it to the rest of your files so it can be used. Module bundlers make heavy use of the newer import and export syntax; many simple mistakes coming from working with bundlers stem from something not being imported or exported correctly. If you are not very familiar with the new syntaxes and the different browsers that implement them, be sure to read about them before jumping into working with a module bundler.

Getting started with webpack

Resolving library files

Starting with the 7.2.0 release, the charting library is available as an npm tarball. The ChartIQ npm package has been designed to work well within the patterns set by webpack. See Installing with npm.

If you are not loading the library as a package through npm, webpack will need to know where to look to resolve the files. Inside the resolve key of your webpack.config.js you can set the path to the chartiq folder under modules and specify file names as aliases.

Inside your webpack.config.js file:

{
	"resolve": {
		"alias": {
			// Alternative pathways to filenames just in case you want to use them
			"chartiq": path.resolve(__dirname, "path", "to", "put-your-library-directory"),

			// Starting in version 7.2.0 you will see some new file paths in UMD headers to resolve files
			// from the root of the "chartiq" package.
			// You may need to make some changes to your aliases
			"chartiq/js/chartiq": path.resolve(__dirname, "path", "to", "chartiq.js"),
			"chartiq/js/componentUI": path.resolve(__dirname, "path", "to", "componentUI.js"),
			"chartiq/js/components": path.resolve(__dirname, "path", "to", "components.js")
			"chartiq/js/addOns": path.resolve(__dirname, "path", "to", "addOns.js")

			// Or alias some file as something else
			"awesomeQuoteFeed": path.resolve(__dirname, "path", "to", "quoteFeedSimulator.js")
		},
		"modules": [
			"node_modules",
			// Path to the extracted 'chartiq' folder from your license zip
			path.join(__dirname, "path", "to", "chartiq", "folder"),
		]
	}
}

webpack.ProvidePlugin

An alternative way to load the library with webpack is to use webpack.ProvidePlugin to have webpack automatically provide the CIQ namespace directly to the rest of your project by dependency injection.

Inside your webpack.config.js file:

{
    "plugins": [
        new webpack.ProvidePlugin({
            "CIQ": "chartiq",
            "$$$": "chartiq",
            // webpack will also let you provide a named export
            "quoteFeedSimulator": [
                path.join("path", "to", "quoteFeedSimulator"),
                "quoteFeedSimulator"
            ]
        })
    ]
}

By using ProvidePlugin you can immediately get started using the following variables anywhere in your bundle and webpack will inject the library files as dependencies (note that if you do not use the variables, the library files will not be injected into the dependency graph). With ProvidePlugin you do not need to explicitly import CIQ or the quoteFeedSimulator where you would like to use the charting library. While this approach is not the most explicit, it can be quicker. Prior to v7.2.0 this approach was commonly used to provide access to the CIQ namespace.

Example webpack configuration

Included your library is an example showing how to use webpack to bundle the library to create an advanced chart. The chartiq folder of your library contains a webpack.config.js configuration file, a package.json file to go with it, and a src folder containing sample-template-webpack.js (the entry point module) and index.html (the bundle template file). These files enable you to create a bundle from the ChartIQ library.

To create the bundle, run the following commands from the chartiq folder:

  • npm install
  • npm run build

The bundle is created in the chartiq/dist folder. Load chartiq/dist/index.html in your web browser; the generated file is equivalent to ChartIQ's advanced chart template.

Note: You may need to change the paths referenced in webpack.config.js to adapt the example for your application.

Loading other file types

The example provided seeks to bundle as many resources as possible, including html and css/scss. For this task it employs a few commonly used plugins to accomplish that goal. It also uses some loaders to help webpack understand how to load those files. Make sure that you have installed all of the dependencies in package.json file and please see the modules section of the sample webpack.config.js provided for details. These loaders are required if you are planning to use plugins with a module bundler.

The example also illustrates how to use bundle-splitting to achieve more manageable script file sizes than bundling all of the library into one, big js file. One way to split the files is illustrated in the optimizations section of the webpack.config.js.

Next steps