HelpBot Assistant

How can I help you?

Tooltip in Vue Chart component

3 Feb 202624 minutes to read

The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point.

Default tooltip

By default, the tooltip is not visible. You can enable the tooltip by setting the enable property to true and by injecting Tooltip into the provide.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' name='China' :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, StepLineSeries, DateTime, Tooltip } from "@syncfusion/ej2-vue-charts";



const seriesData = [
  { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
  { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
const primaryXAxis = {
  valueType: 'DateTime'
};
const marker = {
  visible: true, width: 10, height: 10
};
const tooltip = { enable: true };
const title = "Unemployment Rates 1975-2010";

provide('chart', [StepLineSeries, DateTime, Tooltip]);

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

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, StepLineSeries, 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(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ],
      primaryXAxis: {
        valueType: 'DateTime'
      },
      marker: {
        visible: true, width: 10, height: 10
      },
      tooltip: { enable: true },
      title: "Unemployment Rates 1975-2010"
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime, Tooltip]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Fixed tooltip

By default, the tooltip tracks the mouse movement. You can render the tooltip at a fixed position by using the location property.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' name='China' :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, StepLineSeries, DateTime, Tooltip } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
  { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
const primaryXAxis = {
  valueType: 'DateTime'
};
const marker = {
  visible: true, width: 10, height: 10
};
const tooltip = { enable: true, location: { x: 120, y: 20 } };
const title = "Unemployment Rates 1975-2010";

provide('chart', [StepLineSeries, DateTime, Tooltip]);

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

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, StepLineSeries, 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(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ],
      primaryXAxis: {
        valueType: 'DateTime'
      },
      marker: {
        visible: true, width: 10, height: 10
      },
      tooltip: { enable: true, location: { x: 120, y: 20 } },
      title: "Unemployment Rates 1975-2010"
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime, Tooltip]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Format the tooltip

By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format ${series.name} ${point.x} displays the series name along with the x-value of the data point.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' name='China' :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, StepLineSeries, DateTime, Tooltip } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
  { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
const primaryXAxis = {
  valueType: 'DateTime'
};
const marker = {
  visible: true, width: 10, height: 10
};
const tooltip = { enable: true, header: 'Unemployment', format: '<b>${point.x} : ${point.y}</b>' };
const title = "Unemployment Rates 1975-2010";

provide('chart', [StepLineSeries, DateTime, Tooltip]);

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

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, StepLineSeries, 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(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ],
      primaryXAxis: {
        valueType: 'DateTime'
      },
      marker: {
        visible: true, width: 10, height: 10
      },
      tooltip: { enable: true, header: 'Unemployment', format: '<b>${point.x} : ${point.y}</b>' },
      title: "Unemployment Rates 1975-2010"
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime, Tooltip]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Individual series format

Each series tooltip can be formatted separately by using the series tooltipFormat property.

Note: When the series tooltipFormat property is specified, the tooltip for that series is displayed in the defined format. Otherwise, the global tooltip format is applied.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Spline' xName='x' yName='y' name='Max Temp' :marker='marker'
          tooltipFormat='${point.x}'> </e-series>
        <e-series :dataSource='seriesData2' type='Spline' xName='x' yName='y' name='Avg Temp' :marker='marker'
          tooltipFormat='${point.y}'> </e-series>
        <e-series :dataSource='seriesData3' type='Spline' xName='x' yName='y' name='Min Temp' :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, SplineSeries, Category, Tooltip } from "@syncfusion/ej2-vue-charts";




const seriesData1 = [
  { x: 'Sun', y: 15 }, { x: 'Mon', y: 22 },
  { x: 'Tue', y: 32 },
  { x: 'Wed', y: 31 },
  { x: 'Thu', y: 29 }, { x: 'Fri', y: 24 },
  { x: 'Sat', y: 18 },
];
const seriesData2 = [
  { x: 'Sun', y: 10 }, { x: 'Mon', y: 18 },
  { x: 'Tue', y: 28 },
  { x: 'Wed', y: 28 },
  { x: 'Thu', y: 26 }, { x: 'Fri', y: 20 },
  { x: 'Sat', y: 15 }
];
const seriesData3 = [
  { x: 'Sun', y: 2 }, { x: 'Mon', y: 12 },
  { x: 'Tue', y: 22 },
  { x: 'Wed', y: 23 },
  { x: 'Thu', y: 19 }, { x: 'Fri', y: 13 },
  { x: 'Sat', y: 8 },
];
const primaryXAxis = {
  valueType: 'Category'
};
const marker = {
  visible: true, width: 10, height: 10
};
const tooltip = { enable: true, header: 'Unemployment', format: '<b>${point.x} : ${point.y}</b>' };
const title = "NC Weather Report - 2016";

provide('chart', [SplineSeries, Category, Tooltip]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData1' type='Spline' xName='x' yName='y' name='Max Temp' :marker='marker'
          tooltipFormat='${point.x}'> </e-series>
        <e-series :dataSource='seriesData2' type='Spline' xName='x' yName='y' name='Avg Temp' :marker='marker'
          tooltipFormat='${point.y}'> </e-series>
        <e-series :dataSource='seriesData3' type='Spline' xName='x' yName='y' name='Min Temp' :marker='marker'>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, SplineSeries, Category, Tooltip } from "@syncfusion/ej2-vue-charts";



export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData1: [
        { x: 'Sun', y: 15 }, { x: 'Mon', y: 22 },
        { x: 'Tue', y: 32 },
        { x: 'Wed', y: 31 },
        { x: 'Thu', y: 29 }, { x: 'Fri', y: 24 },
        { x: 'Sat', y: 18 },
      ],
      seriesData2: [
        { x: 'Sun', y: 10 }, { x: 'Mon', y: 18 },
        { x: 'Tue', y: 28 },
        { x: 'Wed', y: 28 },
        { x: 'Thu', y: 26 }, { x: 'Fri', y: 20 },
        { x: 'Sat', y: 15 }
      ],
      seriesData3: [
        { x: 'Sun', y: 2 }, { x: 'Mon', y: 12 },
        { x: 'Tue', y: 22 },
        { x: 'Wed', y: 23 },
        { x: 'Thu', y: 19 }, { x: 'Fri', y: 13 },
        { x: 'Sat', y: 8 },
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      marker: {
        visible: true, width: 10, height: 10
      },
      tooltip: { enable: true, header: 'Unemployment', format: '<b>${point.x} : ${point.y}</b>' },
      title: "NC Weather Report - 2016"
    };
  },
  provide: {
    chart: [SplineSeries, Category, Tooltip]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Tooltip template

Custom HTML content can be rendered in the tooltip by using the template property. The ${x} and ${y} placeholders can be used within the template to display the x- and y-values of the corresponding data point.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' name='China' :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, StepLineSeries, DateTime, Tooltip } from "@syncfusion/ej2-vue-charts";
import { createApp } from "vue";

const app = createApp();
var TemplateVue = app.component('contentTemplate', {
  template: `<div>
                   <table style="width:100%;  border: 1px solid black;">
                   <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
                    <tr><td bgcolor="#00FFFF">:</td><td bgcolor="#00FFFF"></td></tr>
                   </table></div> `,
  data() {
    return {
      data: {}
    };
  }
});

let contentTemplate = function () {
  return { template: TemplateVue };
};


const seriesData = [
  { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
  { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];
const primaryXAxis = {
  valueType: 'DateTime'
};
const marker = {
  visible: true, width: 10, height: 10
};
const tooltip = { enable: true, template: contentTemplate };
const title = "Unemployment Rates 1975-2010";

provide('chart', [StepLineSeries, DateTime, Tooltip]);

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

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

const app = createApp();
var TemplateVue = app.component('contentTemplate', {
  template: `<div>
                   <table style="width:100%;  border: 1px solid black;">
                   <tr><th colspan="2" bgcolor="#00FFFF">Unemployment</th></tr>
                    <tr><td bgcolor="#00FFFF">:</td><td bgcolor="#00FFFF"></td></tr>
                   </table></div> `,
  data() {
    return {
      data: {}
    };
  }
});

let contentTemplate = function () {
  return { template: TemplateVue };
};


export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ],
      primaryXAxis: {
        valueType: 'DateTime'
      },
      marker: {
        visible: true, width: 10, height: 10
      },
      tooltip: { enable: true, template: contentTemplate },
      title: "Unemployment Rates 1975-2010"
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime, Tooltip]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Enable highlight

By setting the enableHighlight property to true, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip' :legendSettings='legendSettings'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' name='China' width=2 :marker='marker'>
        </e-series>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y1' name='Australia' width=2 :marker='marker'>
        </e-series>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y2' name='Japan' 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, StepLineSeries, DateTime, Tooltip, Legend } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
  { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
const primaryXAxis = {
  title: 'Years',
  lineStyle: { width: 0 },
  labelFormat: 'y',
  intervalType: 'Years',
  valueType: 'DateTime',
  edgeLabelPlacement: 'Shift'
};
const primaryYAxis = {
  title: 'Percentage (%)',
  minimum: 0,
  maximum: 20,
  interval: 4,
  labelFormat: '{value}%'
};
const marker = {
  visible: true, 
  width: 10, 
  height: 10
};
const tooltip = { enable: true, enableHighlight: true };
const title = "Unemployment Rates 1975-2010";
const legendSettings = { visible: true };

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

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

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, StepLineSeries, DateTime, Tooltip, Legend } 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(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
        { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
      ],
      primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
      },
      primaryYAxis: {
        title: 'Percentage (%)',
        minimum: 0,
        maximum: 20,
        interval: 4,
        labelFormat: '{value}%'
      },
      marker: {
        visible: true, 
        width: 10, 
        height: 10
      },
      tooltip: { enable: true, enableHighlight: true },
      title: "Unemployment Rates 1975-2010",
      legendSettings: { visible: true }
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime, Tooltip, Legend]
  }
};
</script>
<style>
  #container {
    height: 350px;
  }
</style>

Customize the appearance of tooltip

The appearance of the tooltip can be customized by using the following properties:

  • fill to set the background color
  • border to configure the tooltip border
  • textStyle to customize the tooltip text style

The highlightColor property is used to change the color of a data point when it is highlighted during tooltip interaction.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :tooltip="tooltip"
      :highlightColor="highlightColor">
      <e-series-collection>
        <e-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="China" :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,
  ColumnSeries,
  DateTime,
  Tooltip,
} from "@syncfusion/ej2-vue-charts";



const seriesData = [
  { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
  { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 },
];
const primaryXAxis = {
  valueType: "DateTime",
};
const marker = {
  visible: true,
  width: 10,
  height: 10,
};
const tooltip = {
  enable: true,
  format: "${series.name} ${point.x} : ${point.y}",
  fill: "#7bb4eb",
  border: {
    width: 2,
    color: "grey",
  },
};
const title = "Unemployment Rates 1975-2010";
const highlightColor = "red";

provide('chart', [ColumnSeries, DateTime, Tooltip],);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :tooltip="tooltip"
      :highlightColor="highlightColor">
      <e-series-collection>
        <e-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="China" :marker="marker">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import {
  ChartComponent, SeriesDirective, SeriesCollectionDirective,
  ColumnSeries,
  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(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 },
      ],
      primaryXAxis: {
        valueType: "DateTime",
      },
      marker: {
        visible: true,
        width: 10,
        height: 10,
      },
      tooltip: {
        enable: true,
        format: "${series.name} ${point.x} : ${point.y}",
        fill: "#7bb4eb",
        border: {
          width: 2,
          color: "grey",
        },
      },
      title: "Unemployment Rates 1975-2010",
      highlightColor: "red",
    };
  },
  provide: {
    chart: [ColumnSeries, DateTime, Tooltip],
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Tooltip mapping name

By default, the tooltip displays only the x- and y-values of a data point. Additional information from the data source can be shown by using the tooltipMappingName property of the series. Use the ${point.tooltip} placeholder in the tooltip format to display the mapped value.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' tooltipMappingName='text' :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, ColumnSeries, Category, Tooltip } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Germany', y: 72, text: 'GER: 72' },
  { x: 'Russia', y: 103.1, text: 'RUS: 103.1' },
  { x: 'Brazil', y: 139.1, text: 'BRZ: 139.1' },
  { x: 'India', y: 462.1, text: 'IND: 462.1' },
  { x: 'China', y: 721.4, text: 'CHN: 721.4' },
  { x: 'United States Of America', y: 286.9, text: 'USA: 286.9' },
  { x: 'Great Britain', y: 115.1, text: 'GBR: 115.1' },
  { x: 'Nigeria', y: 97.2, text: 'NGR: 97.2' },
];
const primaryXAxis = {
  valueType: 'Category'
};
const marker = {
  visible: true, width: 10, height: 10
};
const tooltip = { enable: true, format: '${point.tooltip}' };
const title = 'Internet Users in Million – 2016';

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

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' tooltipMappingName='text' :marker='marker'>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, ColumnSeries, Category, 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: 'Germany', y: 72, text: 'GER: 72' },
        { x: 'Russia', y: 103.1, text: 'RUS: 103.1' },
        { x: 'Brazil', y: 139.1, text: 'BRZ: 139.1' },
        { x: 'India', y: 462.1, text: 'IND: 462.1' },
        { x: 'China', y: 721.4, text: 'CHN: 721.4' },
        { x: 'United States Of America', y: 286.9, text: 'USA: 286.9' },
        { x: 'Great Britain', y: 115.1, text: 'GBR: 115.1' },
        { x: 'Nigeria', y: 97.2, text: 'NGR: 97.2' },
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      marker: {
        visible: true, width: 10, height: 10
      },
      tooltip: { enable: true, format: '${point.tooltip}' },
      title: 'Internet Users in Million – 2016',
    };
  },
  provide: {
    chart: [ColumnSeries, Category, Tooltip]
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Closest tooltip

The showNearestTooltip property displays the tooltip for the data point nearest to the pointer, even when the pointer is not directly positioned over the point.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip' :legendSettings='legendSettings'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' name='China' width=2 :marker='marker'>
        </e-series>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y1' name='Australia' width=2 :marker='marker'>
        </e-series>
        <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y2' name='Japan' 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, StepLineSeries, DateTime, Tooltip, Legend } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: new Date(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
  { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
  { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
  { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
  { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
  { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
  { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
  { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
];
const primaryXAxis = {
  title: 'Years',
  lineStyle: { width: 0 },
  labelFormat: 'y',
  intervalType: 'Years',
  valueType: 'DateTime',
  edgeLabelPlacement: 'Shift'
};
const primaryYAxis = {
  title: 'Percentage (%)',
  minimum: 0,
  maximum: 20,
  interval: 4,
  labelFormat: '{value}%'
};
const marker = {
  visible: true, 
  width: 10, 
  height: 10
};
const tooltip = { enable: true, enableHighlight: true , showNearestTooltip: true};
const title = "Unemployment Rates 1975-2010";
const legendSettings = { visible: true };

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

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

import { ChartComponent, SeriesDirective, SeriesCollectionDirective, StepLineSeries, DateTime, Tooltip, Legend } 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(1975, 0, 1), y: 16,   y1: 10,  y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19,   y1: 11,  y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7,   y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8,   y2: 5 },
        { x: new Date(2000, 0, 1), y: 14,   y1: 6,   y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10,   y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16,   y1: 7,   y2: 3.7 }
      ],
      primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
      },
      primaryYAxis: {
        title: 'Percentage (%)',
        minimum: 0,
        maximum: 20,
        interval: 4,
        labelFormat: '{value}%'
      },
      marker: {
        visible: true, 
        width: 10, 
        height: 10
      },
      tooltip: { enable: true, enableHighlight: true, showNearestTooltip: true },
      title: "Unemployment Rates 1975-2010",
      legendSettings: { visible: true }
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime, Tooltip, Legend]
  }
};
</script>
<style>
  #container {
    height: 350px;
  }
</style>