Hide tool tip in Vue Chart component

3 Feb 20268 minutes to read

The tooltip displayed for a chart series can be conditionally hidden by using the tooltipRender event. This is useful when tooltips should be shown only for selected series or specific data points.

To hide the tooltip for unselected series, follow the steps below.

Step 1:

Use the tooltipRender event to access the tooltip rendering arguments. From the event arguments, the corresponding series element can be obtained and checked to determine whether it belongs to a deselected series.

By comparing the seriesElement class list with the deselected container, the tooltip rendering can be conditionally canceled. If the series is identified as unselected, set args.cancel to true to prevent the tooltip from being displayed.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      selectionMode='Series' :tooltipRender='tooltipRender' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </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, Selection, Tooltip } from "@syncfusion/ej2-vue-charts";

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

provide('chart', [ColumnSeries, Category, Selection, Tooltip]);
const tooltipRender = (args) => {
  var series = (args.series);
    if (series.seriesElement.childNodes[0].classList[0] === 'container_ej2_deselected') {
        args.cancel = true;
      } else {
        args.cancel = false;
      }
};

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      selectionMode='Series' :tooltipRender='tooltipRender' :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Selection, Tooltip } 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, silver: 60 },
        { country: "China", gold: 40, silver: 50 },
        { country: "Japan", gold: 70, silver: 80 },
        { country: "Australia", gold: 60, silver: 70 },
        { country: "France", gold: 50, silver: 60 },
        { country: "Germany", gold: 40, silver: 50 },
        { country: "Italy", gold: 40, silver: 50 },
        { country: "Sweden", gold: 30, silver: 70 }
      ],
      primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
      },
      primaryYAxis:
      {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
      },
      title: "Olympic Medals",
      tooltip: { enable: true }
    };
  },
  provide: {
    chart: [ColumnSeries, Category, Selection, Tooltip]
  },
  methods: {
    tooltipRender: function (args) {
      var series = (args.series);
       if (series.seriesElement.childNodes[0].classList[0] === 'container_ej2_deselected') {
        args.cancel = true;
      } else {
        args.cancel = false;
      }
    }
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>