Stock Chart can be given a title using title property, to show the information about the data plotted.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component<{},{}> {
public primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
};
public primaryyAxis: AxisModel= {
labelFormat: 'n0',
lineStyle: { width: 0 },
rangePadding: 'None',
majorTickLines: { width: 0 }
};
public crosshair: CrosshairSettingsModel ={ enable: true } ;
public titlestyle:FontModel ={fontFamily: "Arial", color: '#424242 '};
render(){
return <StockChartComponent id='stockcharts'
primaryXAxis={ this.primaryxAxis }
primaryYAxis={ this.primaryyAxis }
tooltip={this.tooltip}
crosshair={this.crosshair}
title='AAPL Stock Price'
titleStyle = { this.titlestyle }>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("stockcharts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
};
this.primaryyAxis = {
labelFormat: 'n0',
lineStyle: { width: 0 },
rangePadding: 'None',
majorTickLines: { width: 0 }
};
this.crosshair = { enable: true };
this.titlestyle = { fontFamily: "Arial", color: '#424242 ' };
}
render() {
return <StockChartComponent id='stockcharts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} tooltip={this.tooltip} crosshair={this.crosshair} title='AAPL Stock Price' titleStyle={this.titlestyle}>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("stockcharts"));Title Customization
The textStyle property of chart title provides options to customize the size, color, fontFamily, fontWeight,fontStyle, opacity, textAlignment and textOverflow.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component<{},{}> {
public primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
public primaryyAxis: AxisModel= {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
public crosshair: CrosshairSettingsModel ={ enable: true } ;
public titlestyle:FontModel ={fontFamily: "Arial", color: '#424242 ',textOverflow: 'Wrap'};
render(){
return <StockChartComponent id='stockcharts'
primaryXAxis={ this.primaryxAxis }
primaryYAxis={ this.primaryyAxis }
title='AAPL Stock Price'
titleStyle = { this.titlestyle }>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("stockcharts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
this.primaryyAxis = {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
this.crosshair = { enable: true };
this.titlestyle = { fontFamily: "Arial", color: '#424242 ', textOverflow: 'Wrap' };
}
render() {
return <StockChartComponent id='stockcharts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='AAPL Stock Price' titleStyle={this.titlestyle}>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("stockcharts"));Changing Stock Chart theme will affect background color, grid lines, tooltip colors and appearance.
theme property of Stock chart is shipped with several built-in themes such as Material, Fabric, Bootstrap , HighContrastLight, MaterialDark, FabricDark, FabricDark, HighContrast and BootstrapDark.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component<{},{}> {
public primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
public primaryyAxis: AxisModel= {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
public crosshair: CrosshairSettingsModel ={ enable: true } ;
render(){
return <StockChartComponent id='stockcharts'
primaryXAxis={ this.primaryxAxis }
primaryYAxis={ this.primaryyAxis }
title='AAPL Stock Price'
theme='HighContrast'>
<Inject services={[DateTime, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("stockcharts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export } from '@syncfusion/ej2-react-charts';
import { chartData } from 'datasource.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
this.primaryyAxis = {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
this.crosshair = { enable: true };
}
render() {
return <StockChartComponent id='stockcharts' primaryXAxis={this.primaryxAxis} primaryYAxis={this.primaryyAxis} title='AAPL Stock Price' theme='HighContrast'>
<Inject services={[DateTime, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} xName='date' type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("stockcharts"));