HelpBot Assistant

How can I help you?

Cross hair and track ball in Vue Chart component

3 Feb 202624 minutes to read

The crosshair feature displays vertical and horizontal guide lines that intersect at the mouse or touch position, helping to identify the corresponding axis values precisely.

Crosshair lines can be enabled by setting the enable property in the crosshair settings.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :crosshair='crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' name='Temperature'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Crosshair, DateTime } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}


const seriesData1 = series1;
const primaryXAxis = {
  valueType: 'DateTime',
  labelFormat: 'yMMM'
};
const title = "Weather Condition";
const crosshair = { enable: true };

provide('chart', [LineSeries, Crosshair, DateTime]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :crosshair='crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' name='Temperature'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Crosshair, DateTime } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
        valueType: 'DateTime',
        labelFormat: 'yMMM'
      },
      title: "Weather Condition",
      crosshair: { enable: true }
    };
  },
  provide: {
    chart: [LineSeries, Crosshair, DateTime]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Tooltip for axis

Axis tooltip labels can be enabled by setting the enable property of crosshairTooltip in the corresponding axis. This tooltip displays the current axis value at the crosshair position.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :crosshair='crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' name='Temperature'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Crosshair, DateTime } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}


const seriesData1 = series1;
const primaryXAxis = {
  valueType: 'DateTime',
  crosshairTooltip: { enable: true },
  labelFormat: 'yMMM'
};
const primaryYAxis = {
  crosshairTooltip: { enable: true }
};
const title = "Weather Condition";
const crosshair = { enable: true };

provide('chart', [LineSeries, Crosshair, DateTime]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :crosshair='crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' name='Temperature'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Crosshair, DateTime } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
        valueType: 'DateTime',
        crosshairTooltip: { enable: true },
        labelFormat: 'yMMM'
      },
      primaryYAxis: {
        crosshairTooltip: { enable: true }
      },
      title: "Weather Condition",
      crosshair: { enable: true }
    };
  },
  provide: {
    chart: [LineSeries, Crosshair, DateTime]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Customization

The fill and textStyle properties of crosshairTooltip are used to customize the background color and font style of the crosshair label.

The color and width of the crosshair lines can be customized by using the line property in the crosshair settings.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
            :crosshair='crosshair'>
            <e-series-collection>
                <e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' name='Temperature'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Crosshair, DateTime } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}


const seriesData1 = series1;
const primaryXAxis = {
    valueType: 'DateTime',
    crosshairTooltip: { enable: true, fill: 'green' },
    labelFormat: 'yMMM'
};
const primaryYAxis = {
    crosshairTooltip: { enable: true, fill: 'green' },
};
const title = "Weather Condition";
const crosshair = { enable: true, line: { width: 2, color: 'green' }, fill: 'green' };

provide('chart', [LineSeries, Crosshair, DateTime]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :crosshair='crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Line' xName='x' yName='y' name='Temperature'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Crosshair, DateTime } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let point1;
let value = 40;
let i;
for (i = 1; i < 500; i++) {
  if (Math.random() > .5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
  series1.push(point1);
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: series1,
      primaryXAxis: {
        valueType: 'DateTime',
        crosshairTooltip: { enable: true, fill: 'green' },
        labelFormat: 'yMMM'
      },
      primaryYAxis: {
        crosshairTooltip: { enable: true, fill: 'green' },
      },
      title: "Weather Condition",
      crosshair: { enable: true, line: { width: 2, color: 'green' }, fill: 'green' }
    };
  },
  provide: {
    chart: [LineSeries, Crosshair, DateTime]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Note: To use the crosshair feature, inject Crosshair into the provide.

Snap to data

By enabling the snapToData property, the crosshair snaps to the nearest data point instead of following the exact mouse position. This improves accuracy when inspecting values.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :crosshair='crosshair' :tooltip='tooltip' :legendSettings='legendSettings'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='John' width=2 :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Crosshair, DateTime, Legend, Tooltip } from "@syncfusion/ej2-vue-charts";

const seriesData = [
    { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
    { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
    { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
    { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
    { x: new Date(2002, 2, 7),  y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
    { x: new Date(2002, 9, 7),  y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
    { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
    { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
    { x: new Date(2004, 2, 6),  y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
    { x: new Date(2004, 9, 6),  y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
    { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
    { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
    { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
];
const primaryXAxis = {
    title: 'Years',
    minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
    intervalType: 'Years',
    valueType: 'DateTime',
    lineStyle: { width: 0 },
    majorGridLines: { width: 0 },
    edgeLabelPlacement: 'Shift',
};
const primaryYAxis = {
    title: 'Revenue in Millions',
    labelFormat: '{value}M',
    majorTickLines: { width: 0 },
    minimum: 10, maximum: 60,
    lineStyle: { width: 0 }
};
const tooltip = { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' };
const crosshair = { enable: true, lineType: 'Horizontal', snapToData: true };
const title = 'Average Sales per Person';
const legendSettings = { visible: false };
const marker = { visible: true };

provide('chart', [LineSeries, Crosshair, DateTime, Legend, Tooltip]);

</script>
<style>
  #container {
    height: 350px;
  }
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :crosshair='crosshair' :tooltip='tooltip' :legendSettings='legendSettings'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='John' width=2 :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Crosshair, DateTime, Legend, Tooltip } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
        { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
        { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
        { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
        { x: new Date(2002, 2, 7),  y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
        { x: new Date(2002, 9, 7),  y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
        { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
        { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
        { x: new Date(2004, 2, 6),  y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
        { x: new Date(2004, 9, 6),  y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
        { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
        { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
        { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
      ],
      primaryXAxis: {
        title: 'Years',
        minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
        intervalType: 'Years',
        valueType: 'DateTime',
        lineStyle: { width: 0 },
        majorGridLines: { width: 0 },
        edgeLabelPlacement: 'Shift',
      },
      primaryYAxis: {
        title: 'Revenue in Millions',
        labelFormat: '{value}M',
        majorTickLines: { width: 0 },
        minimum: 10, maximum: 60,
        lineStyle: { width: 0 }
      },
      tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
      crosshair: { enable: true, lineType: 'Horizontal', snapToData: true },
      title: 'Average Sales per Person',
      legendSettings: { visible: false },
      marker: { visible: true }
    };
  },
  provide: {
    chart: [LineSeries, Crosshair, DateTime, Legend, Tooltip]
  }
};
</script>
<style>
  #container {
    height: 350px;
  }
</style>

Trackball

The trackball feature tracks the data point closest to the mouse or touch position. A trackball marker highlights the nearest point, and the trackball tooltip displays detailed information about that point.

To use the trackball feature, inject both Crosshair and Tooltip into the provide.

Trackball functionality can be enabled by setting the enable property of the crosshair to true and the shared property of the tooltip to true.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :crosshair='crosshair' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='John' :marker='marker'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' name='Andrew' :marker='marker'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y2' name='Thomas' :marker='marker'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y3' name='Mark' :marker='marker'> </e-series>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y4' name='William' :marker='marker'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Crosshair, DateTime, Tooltip } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
  { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
  { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
  { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
  { x: new Date(2002, 2, 7), y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
  { x: new Date(2002, 9, 7), y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
  { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
  { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
  { x: new Date(2004, 2, 6), y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
  { x: new Date(2004, 9, 6), y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
  { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
  { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
  { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
];
const primaryXAxis = {
  title: 'Years',
  minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
  intervalType: 'Years',
  valueType: 'DateTime',
};
const title = "Average Sales per Person";
const crosshair = { enable: true, lineType: 'Vertical' };
const tooltip = { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' };
const marker = { visible: true };

provide('chart', [LineSeries, Crosshair, DateTime, Tooltip]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis' :crosshair='crosshair' :tooltip='tooltip'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='John' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y1' name='Andrew' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y2' name='Thomas' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y3' name='Mark' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData' type='Line' xName='x' yName='y4' name='William' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Crosshair, DateTime, Tooltip } from "@syncfusion/ej2-vue-charts";



export default {
name: "App",
components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
        seriesData: [
            { x: new Date(2000, 2, 11), y: 15, y1: 39, y2: 60, y3: 75, y4: 85 },
            { x: new Date(2000, 9, 14), y: 20, y1: 30, y2: 55, y3: 75, y4: 83 },
            { x: new Date(2001, 2, 11), y: 25, y1: 28, y2: 48, y3: 68, y4: 85 },
            { x: new Date(2001, 9, 16), y: 21, y1: 35, y2: 57, y3: 75, y4: 87 },
            { x: new Date(2002, 2, 7), y: 13, y1: 39, y2: 62, y3: 71, y4: 82 },
            { x: new Date(2002, 9, 7), y: 18, y1: 41, y2: 64, y3: 69, y4: 74 },
            { x: new Date(2003, 2, 11), y: 24, y1: 45, y2: 57, y3: 81, y4: 73 },
            { x: new Date(2003, 9, 14), y: 23, y1: 48, y2: 53, y3: 84, y4: 75 },
            { x: new Date(2004, 2, 6), y: 19, y1: 54, y2: 63, y3: 85, y4: 73 },
            { x: new Date(2004, 9, 6), y: 31, y1: 55, y2: 50, y3: 87, y4: 60 },
            { x: new Date(2005, 2, 11), y: 39, y1: 57, y2: 66, y3: 75, y4: 48 },
            { x: new Date(2005, 9, 11), y: 50, y1: 60, y2: 65, y3: 70, y4: 55 },
            { x: new Date(2006, 2, 11), y: 24, y1: 60, y2: 79, y3: 85, y4: 40 }
              ],
      primaryXAxis: {
            title: 'Years',
            minimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
            intervalType: 'Years',
            valueType: 'DateTime',
        },
        title: "Average Sales per Person",
        crosshair: {  enable: true, lineType: 'Vertical' },
        tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
        marker: { visible: true }
    };
  },
  provide: {
    chart: [LineSeries, Crosshair, DateTime, Tooltip]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Crosshair highlight

The highlightCategory property highlights the background of the entire category when the crosshair is moved over the chart.

The crosshair line color can be customized using the color property within the line configuration.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :crosshair = 'crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Crosshair } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { country: "USA", gold: 50 },
  { country: "China", gold: 40 },
  { country: "Japan", gold: 70 },
  { country: "Australia", gold: 60 },
  { country: "France", gold: 50 },
  { country: "Germany", gold: 40 },
  { country: "Italy", gold: 40 },
  { country: "Sweden", gold: 30 }
];
const primaryXAxis = {
  valueType: 'Category',
  title: 'Countries'
};
const primaryYAxis =
{
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const crosshair = { enable: true, line: { color: 'red' }, lineType: 'Vertical', highlightCategory: true },
const title = "Olympic Medals";

provide('chart', [ColumnSeries, Category, Crosshair]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :crosshair = 'crosshair'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Crosshair } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { country: "USA", gold: 50 },
        { country: "China", gold: 40 },
        { country: "Japan", gold: 70 },
        { country: "Australia", gold: 60 },
        { country: "France", gold: 50 },
        { country: "Germany", gold: 40 },
        { country: "Italy", gold: 40 },
        { country: "Sweden", gold: 30 }
      ],
      primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
      },
      primaryYAxis:
      {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
      },
      crosshair: { enable: true, line: { color: 'red' }, lineType: 'Vertical', highlightCategory: true },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, Crosshair]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>