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.

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 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 } }} />
}

Advanced Customization

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

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

Keywords

FAQs

What is @chartiq/react-components?

Is @chartiq/react-components popular?

Is @chartiq/react-components well maintained?

Package last updated on 02 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@chartiq/react-components