Appearance in React Stock chart component
20 Jan 202322 minutes to read
Stock Chart Title
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 { 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';
function App() {
const primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
};
const primaryyAxis = {
labelFormat: 'n0',
lineStyle: { width: 0 },
rangePadding: 'None',
majorTickLines: { width: 0 }
};
const crosshair = { enable: true };
const titlestyle = { fontFamily: "Arial", color: '#424242 ' };
const tooltip = { enable: true };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} crosshair={crosshair} height='350' title='AAPL Stock Price' titleStyle={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} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,FontModel, TooltipSettingsModel }
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';
function App() {
const primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' },
crosshairTooltip: { enable: true }
};
const primaryyAxis: AxisModel= {
labelFormat: 'n0',
lineStyle: { width: 0 },
rangePadding: 'None',
majorTickLines: { width: 0 }
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const titlestyle:FontModel ={fontFamily: "Arial", color: '#424242 '};
const tooltip: TooltipSettingsModel ={ enable: true } ;
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
tooltip={tooltip}
crosshair={crosshair}
height='350'
title='AAPL Stock Price'
titleStyle = { 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} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 { 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';
function App() {
const primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
const primaryyAxis = {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
const crosshair = { enable: true };
const titlestyle = { fontFamily: "Arial", color: '#424242 ', textOverflow: 'Wrap' };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='AAPL Stock Price' height='350' titleStyle={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} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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';
function App() {
const primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
const primaryyAxis: AxisModel= {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const titlestyle:FontModel ={fontFamily: "Arial", color: '#424242 ',textOverflow: 'Wrap'};
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
title='AAPL Stock Price'
height='350'
titleStyle = { 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} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Stock Chart Theme
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 { 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';
function App() {
const primaryxAxis = {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
const primaryyAxis = {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
const crosshair = { enable: true };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='AAPL Stock Price' height='350' 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} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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';
function App() {
const primaryxAxis: AxisModel= {
valueType: 'DateTime',
majorGridLines: { width: 0 },
majorTickLines: { color: 'transparent' }
};
const primaryyAxis: AxisModel= {
labelFormat: 'n0',
majorTickLines: { width: 0 }
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
title='AAPL Stock Price'
height='350'
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} type='Candle' animation={{ enable: true }}>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));