@chartiq/react-components

ChartIQ React Components

Contents

• Overview
• Included Components
  • Charts
  • Examples
• Getting Started
• Basic Customization
  • Customizing the Chart config
  • Adding a quotefeed
  • Modifying the Template
  • Adding a lookup driver
• Setting add-ons
• Setting plug-ins
• Advanced Customization

Overview

The ChartIQ React Components is a React component library featuring several advanced components that can be easily imported into an existing React application.

A copy of the ChartIQ library, version 8.4.0 or later.

If you do not have a copy of the library, please contact your account manager or send an email to [e-mail].

NOTE While you can install the React components, they do require the ChartIQ library to work. If you do not have a copy of the library you may evaluate one from here.

Included Components

Each component includes only the bare necessities to allow for maximum customization with the smallest size possible. To get started, we also include example components that come with ChartIQ's example files loaded.

The exported components include:

Charts

• Chart — Core chart component to get started for financial time series charts.
• AdvancedChart — Full featured advanced chart component with everything needed for technical analysis.
• ActiveTrader/Workstation — Sets up an information-rich component ready for traders.
• CrossSection/Chart — Creates a working CrossSection (previously TermStructure) component for dealing with non–time series data.

Examples

• ChartExample — CoreChart with all included ChartIQ example files.
• AdvancedExample — AdvancedChart with all included ChartIQ example files.
• ActiveTrader/WorkstationExample — Workstation with all included ChartIQ example files.
• CrossSection/ChartExample — CrossSection Chart with all included ChartIQ example files.

Getting Started

After installing this package into your React project you will need to install the ChartIQ library (included separately).

npm install chartiq-8.6.0 // or whatever version you are using!

You can then import one of the included components into your React app:

import Chart from '@chartiq/react-components'

export default function MyChart() {
	return <Chart />
}

Basic Customization

Chart components accept two basic props, config and resources, that allow them to be customized. The config describes how the chart should be set up, what addOns and plug-ins should be enabled, hotkeys, and more. Resources are passed to the chart and contain utilities that the chart should use, such as a quoteFeed or a storage constructor.

Customizing the chart config

All components accept a config prop which can be modified to enable various features, set chart properties, load data and more (for full documentation see ChartIQ Default Chart Configuration).

By default, you may pass in only the the parts of the config you want to customize, and these changes will be merged onto the the default configuration. For example:

import Chart from @chartiq/react-components

export default function MyChart() {
	return <Chart config={{ initialSymbol: 'FB' }} />
}

creates a chart with an initial symbol of 'FB' instead of 'AAPL' (the initial symbol of the default configuration).

Adding your own quotefeed

By default, all components will load simulated data using the quoteFeedSimulator so that you have some working data to get started. When you are ready to add your own quotefeed, it should be aded to the resources prop passed into the chart component.

import MyCustomQuotefeed from './myCustomQuotefeed'

<Chart resources={{ quoteFeed: MyCustomQuoteFeed }}}/>

Customizing Component Template

Every component accepts children that it will render instead of its default JSX template. You can start by copying the Template.jsx file from the Chart/ directory to your own src/ directory and making changes.

import MyChartTemplate from './MyTemplate.jsx'

<Chart>
	<MyChartTemplate />
</Chart>

Adding your own LookupDriver

The chart configuration includes the default Lookup.ChartIQ implementation but you can substitute your own lookup driver to power symbol searches.

import Chart from '@chartiq/react-components'
import CustomSymbolLookup from './myCustomSymbolLookup'

<Chart config={{ lookupDriver: CustomSymbolLookup }} />

More information about Lookup Drivers can be found in the data integration ChartIQ Documentation.

Setting add-ons

The default configuration contains initialization for all add ons (see config.addOns) and filters which are enabled with the config.enabledAddOns property. If you would like to disable an add on, set the value in config.enabledAddOns to null. For example to disable the RangeSlider add-on:

import Chart from 'chartiq/react-components/Chart'

<Chart config={{enabledAddOns: { rangeSlider: null } }} />

If you would like to pass custom configuration options to a specific add on then you must pass the arguments to the config.addOns property and make sure the add on is included in the config.enabledAddOns property. For example:

import Chart from 'chartiq/react-components/Chart'
const config = {
  addOns: {
    continuousZoom: {
      periodicities: [
        // daily interval data
        {period: 1,   interval: "month"},
        {period: 1,   interval: "week"},
        {period: 1,   interval: "day"},
      ],
      boundaries: {
        maxCandleWidth: 20,
        minCandleWidth: 5
      }
    }
  },
  enabledAddOns: {
    continousZoom: true
  }
}
<Chart config={config} />

This configuration would enable the continous zoom add on for daily data only with a custom bondary width.

Setting plug-ins

ChartIQ comes with a variety of plug-ins that add enhanced functionality to charts. The default chart configuration contains entries to start plugins once they are imported.

Note: Plug-ins are optional extras that must be purchased. To determine the plug-ins included in your library, see the ./node_modules/chartiq/plugins folder.

The application includes the ChartIQ plug-ins as component resources that are enabled by uncommenting the relevant imports in the component resources file.

For example, to enable the Trade from Chart (TFC) plug-in for Core Chart, uncomment the following lines in the ChartExample.jsx file in the ./src/Chart/ folder:

// import 'chartiq/plugins/tfc/tfc-loader';
// import 'chartiq/plugins/tfc/tfc-demo';

To enable the Market Depth chart and L2 Heat Map when using AdvancedChart from Chart/Advanced inside your own component

#MyComponent.js
import Chart, { CIQ } from "@chartiq/react-components/Chart/Advanced"
import 'chartiq/plugins/activetrader/cryptoiq';
import 'chartiq/examples/feeds/L2_simulator'; /* for use with cryptoiq */

// Don't forget to turn on L2 data simulation!
function simulate({ chartEngine }) {
    CIQ. simulateL2({ chartEngine, onInterval: 1000, onTrade: true });
}

export default function MyComponent() {
    return <Chart chartInitialized={simulate} />
}

There may be a scenario (like loading multiple charts in one document or a single page app) where you need to manually disable a plugin for a certain chart. If you need to disable a plugin it can be disabled by setting its value in config.plugins to null. For example loading a cross section chart with a time series chart:

import Chart from '@chartiq/react-components'

export default function MyTimeSeriesChart() {
  return <Chart config={{ plugins: { crosssection: null } }} />
}

Advanced Customization

It is possible customize the webcomponents that are rendered inside the Template.jsx files. To see an example refer to ChartIQ React App README.

Additional documentantion on web components in the ChartIQ library can be found on documentation.chartiq.com.