ChartIQ | March 22, 2021

Accelerate Time To Market with ChartIQ Templates

Written by Sonyl Nagale

Easy button

Powerful, interactive charts.
Out-of-the-box.

ChartIQ templates make it easy to install powerful, interactive HTML5 charts on your web page or application in a matter of hours. The level of customization after that depends on what you want to do and how far you want to go.

At Cosaic, customization is paramount. We have clients that want different things, and our client’s users want different things, too. We make it easy for financial institutions or retail vendors to install a powerful interactive graphic display to show data—simple and straightforward. But for those that might need sophisticated charts to satisfy power users and advanced traders, we have customization options. Whatever the level of user, we provide a modular product that can adapt.

“If you don’t want a complicated chart — you don’t have to have one. Our templates allow clients to provide state-of-the-art charting solutions for their users in a matter of hours.”

—Eugene Sorenson, Chief Product Officer at Cosaic

Our drop-in HTML5 templates can be used as-is or easily customized to meet your UX requirements or brand standards. Using React, Angular, or Vue? We have templates for these popular frameworks, too. In this post, we’ll discuss how easy it is to quickly get your charting solution to market with ChartIQ templates.

Templates: Make it easy

Our library contains two primary templates. Our most popular template is the technical analysis chart. It is a full featured chart and user interface intended for advanced pre-trade analysis and decision-making. Out of the box, its responsive design provides an optimized solution for desktops and other large screens with support for mobile as well. This is a complete, ready-made chart application.

The Core Chart template is built on the same rich, flexible graphics engine but includes a reduced set of drawing tools, studies, and display options. It provides a simpler user interface designed to meet more general charting use cases as well as in-trade and post-trade analysis.

“We probably could’ve built a charting application ourselves, but it would’ve taken us much longer, and it may not have been as sophisticated as ChartIQ’s templates, nor would it have come with the many benefits.”

—Colm Furlong, Product Marketing Manager at Fidessa

The templates are provided as sample code to illustrate how web components can be used to create a user interface. The example templates are also fully functional applications: use them as is, modify them to suit your requirements, or just refer to them for guidance while creating your own UI. Additionally, it’s easy to whitelabel them to feature your own logo and brand. Need to change the CSS and move objects around? That’s supported without any need for advanced customization. Your front-end developers will find standard HTML and CSS provide more than enough to get started—or be finished with a few tweaks.

Customization guidelines and instructions can be found in the ChartIQ Customization Basics tutorial.

Framework-Agnostic and Framework-Friendly

Part of the allure of JavaScript development frameworks such as React, Angular, and Vue is the fact that you can get off the ground running without reinventing the wheel for logic management. If you’re using a component-based framework, you can lift and re-use our components from our React or Angular sample apps. Working with another framework or type of implementation? We’re agnostic to implementation! We speak JavaScript through-and-through.

All about the UX

Our general rule at Cosaic is we make software we would use ourselves. Our engineers meticulously create state-of-the-art UI and UX as part of our toolkit. This means not only do our templates give you rich graphic capability, but you’re getting HTML template layouts with superior UX design. You can start up a local server and start the advanced or basic template with a few keystrokes.

To use a sample HTML template, you can start a local webserver at the root directory of the library and access technical-analysis-chart.html or basic-chart.html. Customize the functionality by adding, removing, or modifying web components and brand the chart with your look and feel with CSS.  It’s whitelabeling made easy.

Zerohda chart using ChartIQ template

Sample whitelabled chart from Zerodha.

Our templates carry with them the weight and power of JS and CSS—enabling them to do more with less code. It really is as easy as dropping these templates into your application and running with them. Our CSS Overview provides you with the main classes and overrides necessary to take the chart from template to branded by changing a handful of lines.

Additionally, our templates are navigable by keyboard shortcuts. Tabbing through chart displays (rather than mousing) is a great feature that meets accessibility requirements. One step at a time we are bringing accessibility to our charting solution, so that you can satisfy your clients who request it. Stay tuned for more accessibility features coming soon.

Templates for specific use cases

Our templates also expand beyond just the data visualization use case. One, for example, is our Chart Grid. This template allows you to examine and sync multiple charts at once. This is a great use case for monitoring multiple equities at once. Read more in this post: Catch Market Data with Our Synchronized Chart Grid.

 

Chart Grid

ChartIQ Synchronized Chart Grid Template

Our Active Trader template is another use case. With this template, brokers and trading platform providers can offer a full suite of real-time graphics and analytics tools to their most demanding clients: active traders. Who knew it could be as easy as dropping in a template to satisfy power users?

In Conclusion

World-renowned charting software can be installed in your application faster than you can imagine with our ChartIQ templates. The level of customization after that depends on how far you want to go. If you want to go to the distance, we have APIs for that. But remember that getting into the API layer isn’t necessary for many use cases. Our templates get you to market faster without compromising security, stability, performance, or functionality. Best news is they can be further customized, advanced, and modified down the road as your needs change and you mold your story to fit your users.

Demo ChartIQ Technical Analysis Template Now