Integrating the Library with Frameworks

JavaScript frameworks have become widely utilized over the last few years. The ChartIQ library can be integrated with a range of different frameworks. This tutorial will cover best practices for integrating the ChartIQ library with frameworks in general. For specific examples, check out one of our starter kits:

There are several reasons why you might want to integrate the ChartIQ library with a framework:

  • You want a completely different look and feel from what the web components provide.
  • You're integrating the charts into an existing application that is already implemented in a framework
  • You prefer a deep integration with a UI framework for more control over the individual components.

Whatever your reason, integration with a framework is straightforward if you follow the best practices that are outlined in this tutorial.

License requirements

All starter require a valid charting library package. See the particular starter kits for exact version requirements.

Best Practices

  • Web Components do not always play nice with other frameworks: As such, recommend that developers do not directly use the built in Web Components we provide with the ChartIQ library when using a framework (sample-template-advanced.html).

The web components are tempting because they have built in style and funcionality, but unless your framework has inherent support for W3C web components, they will more than likely complicate your project. Instead of using ChartIQ's web components, build your own components using your preferred framework by interfacing directly with the core functionality of the library. Use the starter kits and sample applications as reference for a head start. Note: even if you're using a framework for which we don't provide a starter kit or sample application, you should still review the samples to get an understanding for how to build components.

  • Utilize callbacks appropriately to ensure the UI is in sync with the chart.

One of the most common issues when integrating the library with a framework is that the UI and the chart get out of sync after the user changes something. Many frameworks rely on digest loops that often only run under certain circumstances. If you run into this problem, read the documentation for your framework and identify what you can do to manually trigger a digest loop to force the UI to update. Built in callbacks in many ChartIQ library functions are a perfect place to manually trigger a digest loop. You can also use an injection on "draw" in order to ensure that you have the most accurate library state. Please contact our support if you have any trouble!

  • When utilizing data binding features from your framework, bind directly to the library wherever possible.

In other words, try to avoid using an intermediary "store". For instance, bind directly to stx.layout.chartType rather than to your own chartType variable. This removes an often useless layer of computation or data reassignment, making your program more efficient. Binding directly to the data in the library will also lessen the chance of your UI getting out of sync.

  • Follow the best practices for your framework.

This is sometimes referred to as programming "idiomatically". Once you choose a framework, you should commit to doing things their way. This will make your code more consistent and readable, much easier to debug, and ensure that you are getting the most out of your framework. For example, different data flow differs among frameworks. Frameworks also often have their own way of looping through collections of data. Whatever way is considered to be most in line with your framework is the way you should do it. Treat the library as a pure JavaScript library (not a UI library) and make calls when needed.

  • Utilize any debugging tools that are specifically for your framework.

Most popular frameworks have debugging tools made specifically for that framework. Some examples of these are chrome extensions for Vue.js and Angular. Consider adding these tools to your development environment to make it easier to view changes within your framework components.

What to know when Linting or Packaging the library using module bundlers

If you are packaging the library into a larger solution using module bundlers such as webpack, or running the code through a JS linter, typescript linter, and the like; depending on your settings, this may result in errors or warnings.

Here are some suggestions you can try, one at a time, if you do have issues:

  • Don’t 'require' the library:

    One thing that sometimes helps prevent these type of errors is to load the library with a script tag instead of require()ing it. If you load it with a script tag and just access the window globals, then it should not be checked by the tool that is putting out the error. Example: <script src="js/chartiq.js"></script>

  • Don't 'import' the library:

    Although this may work most of the time, 'import' is not the right approach since our library is currently not packaged as es6 modules.

  • Override default compiler settings:

    Set : "allowJs": true "checkJs": false

  • Instruct your linter to ignore the library files:

    Update your tslint config to ignore imported libraries. Look for a tslint.json file in your project or for a tslint config entry in the package.json.

    It would look something this:

        "extends": "tslint:latest",
        "linterOptions": {
            "exclude": [

    Adjust it so it will not lint anything in the charting library folder.

Next Steps: