Chart Trendlines

The React financial chart component provides many visuals that can be customized, such as the navigation behavior, trendline layers, overlays, legend, chart titles and subtitles.

Demo

Configuring Navigation

In the React financial chart component, chart navigation is enabled by default. However, you can customize it by setting the following properties:

  • IsHorizontalZoomEnabled - This specifies if the chart can be horizontally zoomed through user interactions. By default, this property is set to true.
  • IsVerticalZoomEnabled - This specifies if the chart can be vertically zoomed through user interactions. By default, this property is set to false.
  • IsWindowSyncedToVisibleRange - If set to true the Y-Axis will automatically resize to the visible data range. By default, this property is set to false.
  • windowRect - This is used to retrieve or specify the scroll and zoom state in the igxFinancialChart. The windowRect is expressed as a Rectangle with coordinates and sizes between 0 and 1.
 <IgrFinancialChart
    isHorizontalZoomEnabled={true}
    isVerticalZoomEnabled={true} />

Configuring Price Pane

The price pane is always displayed in the Financial Chart and you can configure it by changing chart type and customizing appearance of its visuals. The following code demonstrates how to set the brushes and thickness of series in the price pane.

 <IgrFinancialChart
    chartType="Candle"
    brushes="Green, Blue"
    outlines="Green, Blue"
    negativeBrushes="Red"
    negativeOutlines="Red"
    thickness={2} />

Configuring Overlays

By default overlays are not displayed on the React financial chart component. There are two types of overlays - BollingerBands and PriceChannel. You can also customize the default settings of the overlays. The following code demonstrates how to set the color, overlay outlines and thickness.

 <IgrFinancialChart
    overlayTypes="BollingerBands"
    overlayBrushes="Red"
    overlayOutlines="Green"
    overlayThickness={2} />

Configuring Indicators

By default the indicator panes are not displayed in the financial chart. The toolbar allows the end user to select which indicator to display at run time. In order to display the pane, an indicator type must be set, as demonstrated in the following code:

 <IgrFinancialChart
    indicatorTypes="AverageTrueRange,ForceIndex"
    indicatorBrushes="Green, Blue"
    indicatorNegativeBrushes="Red"
    indicatorDisplayTypes="Line"
    indicatorThickness={2} />

Configuring Volume Pane

By default volume pane is not displayed in the financial chart component. However, you can enable this pane at runtime using chart toolbar or in programmatically as it is demonstrated in the following code:

 <IgrFinancialChart
    volumeType="Column"
    volumeBrushes="Green, Blue"
    volumeOutlines="White"
    volumeThickness={2} />

Configuring Trendlines

By default trendlines are not displayed on the React financial chart component. When a trendline is displayed, it is the same trendline displayed on all chart panes. You can also customize the default settings of the trendline.

The following code demonstrates how to set the color and thickness of the trendline.

 <IgrFinancialChart
    trendLineType="QuinticFit"
    trendLineBrushes="Green, Blue"
    trendLineThickness={2} />

Configuring Titles

You can set title and subtitle that will be displayed between chart's toolbar and the price pane of the financial chart. The following code demonstrates how to set the title and subtitle.

 <IgrFinancialChart
    chartTitle="Stock Prices"
    subtitle="Between 2000 and 2015" />

Configuring Legend

The legend is not displayed be default. The following code demonstrates how to enable the legend.

 <IgrFinancialChart
    isLegendVisible={true} />