React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Grid and Tick Lines in React Range Navigator component

08 Apr 2021 / 2 minutes to read

Grid line customization

You can customize the width, color, and dashArray of the major grid lines using the majorGridLines property.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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"));
Copied to clipboard
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"));

Tick line customization

You can customize the width, color, and height of the major tick lines using the majorTickLines property.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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"));
Copied to clipboard
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"));
Previous
Next