@chartiq/react-components NPM

ChartIQ React Components

Overview
Included Components
- Charts
- Examples
Getting Started
Basic Customization
Setting add-ons
Setting plug-ins
Advanced Customization

Overview

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

This package simplifies ChartIQ library use in the React framework. A copy of the ChartIQ JavaScript library is required (works best with version @VERSION@).

If you do not have a copy of the library, please contact your account manager or send an email to info@chartiq.com or you may visit our Request Follow Up site to get in contact with us!

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.

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.

Important Note Regarding Localization: When compiling in production mode, default minification may strip out translation data. Webpack optimization parameters may be used to preserve the translation data. As an example, see the output.optimization.minimizer setting in the chartiq-react-app webpack.config.js file.

Getting Started

After installing this package into your React project you will also need to copy and install the ChartIQ library using tarball from your license.

npm install ./chartiq-8.8.0.tgz // or whatever version you are using from your copy of the ChartIQ library!

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 use two primary 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 that can be modified to enable various features, set chart properties, load data, and more (for full documentation, see ChartIQ Default Chart Configuration).

Components require only parts of the default that requires customization, although full configuration can be provided as well. For example, to create a chart with an initial symbol of 'FB' instead of 'AAPL' use:

import Chart from @chartiq/react-components

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

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

Adding your own quotefeed

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. The quote feed simulator can be disabled by setting quoteFeed property in resources prop to a null value.

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 that 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 enables the continuous zoom add-on for daily data only with a custom boundary 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 plug-ins 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';

Changing the default properties of the plug-ins is also as simple as passing in the arguments you prefer when setting up the plug-in. For example, to configure the ActiveTrader plug-in without the orderbook component and a custom height:

import Chart from '@chartiq/react-components/Chart'
import 'chartiq/js/plugins/activeTrader/cryptoiq'

const config = {
  plugins: {
    marketDepth: {
      volume: true,
      mountain: true,
      step: true,
      record: true,
      height: "35%",
      orderbook: false,
      interaction: true
      },
  }
}

<Chart config={config} />

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 plug-in for a certain chart. To disable a plug-in, set its value in config.plugins to null. For example, to load 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 } }} />
}