The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The width
, color
, and dashArray
of the major gridlines can be customized by using the majorGridLines
setting.
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ xData: 10, yData: 35 }, { xData: 20, yData: 28 },
{ xData: 30, yData: 34 }, { xData: 40, yData: 32 },
{ xData: 50, yData: 40 }
];
this.tooltip = { enable: true };
this.majorgridLines = { width: 4, color: 'blue', dashArray: '5,5' };
}
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' tooltip={this.tooltip} majorGridLines={this.majorgridLines} value={[25, 40]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='xData' yName='yData'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = [
{ xData: 10, yData: 35 }, { xData: 20, yData: 28 },
{ xData: 30, yData: 34 }, { xData: 40, yData: 32 },
{ xData: 50, yData: 40 }
];
public tooltip: RangeTooltipSettingsModel = { enable: true };
public majorgridLines = { width: 4, color: 'blue', dashArray: '5,5' };
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
tooltip={this.tooltip}
majorGridLines={this.majorgridLines}
value={[25, 40]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='xData' yName='yData'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The width
, color
, and dashArray
of the major ticklines can be customized by using the majorTickLines
setting.
import { StepLineSeries, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ xData: 10, yData: 35 }, { xData: 20, yData: 28 },
{ xData: 30, yData: 34 }, { xData: 40, yData: 32 },
{ xData: 50, yData: 40 }
];
this.tooltip = { enable: true };
this.majortickLines = { width: 3, color: 'red' };
}
render() {
return <RangeNavigatorComponent id='charts' labelPosition='Outside' tooltip={this.tooltip} majorTickLines={this.majortickLines} value={[25, 40]}>
<Inject services={[RangeTooltip, StepLineSeries]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='xData' yName='yData'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
StepLineSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip,RangeTooltipSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { double } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = [
{ xData: 10, yData: 35 }, { xData: 20, yData: 28 },
{ xData: 30, yData: 34 }, { xData: 40, yData: 32 },
{ xData: 50, yData: 40 }
];
public tooltip: RangeTooltipSettingsModel = { enable: true };
public majortickLines = { width: 3, color: 'red' };
render() {
return <RangeNavigatorComponent id='charts'
labelPosition='Outside'
tooltip={this.tooltip}
majorTickLines={this.majortickLines}
value={[25, 40]}>
<Inject services={[RangeTooltip, StepLineSeries]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='xData' yName='yData'>
</RangenavigatorSeriesDirective>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));