Integrating the Library with Frameworks
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.
- We recommend that developers do not 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 functionality, 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 seed projects for a head start. Note: even if you're using a framework that we don't provide a seed project, you should still review the seed projects 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.
- 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.
- Clone a seed project!