Grid tick in Vue Range navigator component

13 Jun 20248 minutes to read

Grid line customization

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.

<template>
  <div id="app">
    <ejs-rangenavigator :value='value' labelPosition='Outside' :tooltip='tooltip' :majorGridLines='majorGridLines'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' xName='xData' type='Line' yName='yData'></e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";

const majorGridLines = {
  width: 4,
  color: 'blue',
  dashArray: '5,5'
};
const tooltip = { enable: true };
const value = [25, 40];
const data = [
  { xData: 10, yData: 35 }, { xData: 20, yData: 28 },
  { xData: 30, yData: 34 }, { xData: 40, yData: 32 },
  { xData: 50, yData: 40 }
];

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>
<template>
  <div id="app">
    <ejs-rangenavigator :value='value' labelPosition='Outside' :tooltip='tooltip' :majorGridLines='majorGridLines'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' xName='xData' type='Line' yName='yData'></e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-rangenavigator': RangeNavigatorComponent,
    'e-rangenavigator-series': RangenavigatorSeriesDirective,
    'e-rangenavigator-series-collection': RangenavigatorSeriesCollectionDirective
  },
  data() {
    return {
      majorGridLines: {
        width: 4,
        color: 'blue',
        dashArray: '5,5'
      },
      tooltip: { enable: true },
      value: [25, 40],
      data: [
        { xData: 10, yData: 35 }, { xData: 20, yData: 28 },
        { xData: 30, yData: 34 }, { xData: 40, yData: 32 },
        { xData: 50, yData: 40 }
      ]
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>

Tick line customization

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.

<template>
  <div id="app">
    <ejs-rangenavigator :value='value' labelPosition='Outside' :tooltip='tooltip' :majorTickLines='majorTickLines'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' xName='xData' type='Line' yName='yData'></e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { RangeNavigatorComponent as EjsRangenavigator, RangenavigatorSeriesDirective as ERangenavigatorSeries, RangenavigatorSeriesCollectionDirective as ERangenavigatorSeriesCollection, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";

const majorTickLines = {
  width: 3,
  color: 'red'
};
const tooltip = { enable: true };
const value = [25, 40];
const data = [
  { xData: 10, yData: 35 }, { xData: 20, yData: 28 },
  { xData: 30, yData: 34 }, { xData: 40, yData: 32 },
  { xData: 50, yData: 40 }
];

provide('rangeNavigator', [DateTime, AreaSeries]);

</script>
<template>
  <div id="app">
    <ejs-rangenavigator :value='value' labelPosition='Outside' :tooltip='tooltip' :majorTickLines='majorTickLines'>
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series :dataSource='data' xName='xData' type='Line' yName='yData'></e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  </div>
</template>
<script>

import { RangeNavigatorComponent, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionDirective, AreaSeries, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-rangenavigator': RangeNavigatorComponent,
    'e-rangenavigator-series': RangenavigatorSeriesDirective,
    'e-rangenavigator-series-collection': RangenavigatorSeriesCollectionDirective
  },
  data() {
    return {
      majorTickLines: {
        width: 3,
        color: 'red'
      },
      tooltip: { enable: true },
      value: [25, 40],
      data: [
        { xData: 10, yData: 35 }, { xData: 20, yData: 28 },
        { xData: 30, yData: 34 }, { xData: 40, yData: 32 },
        { xData: 50, yData: 40 }
      ]
    };
  },
  provide: {
    rangeNavigator: [DateTime, AreaSeries]
  }
};
</script>