CODEWITHSUNDEEP
d3.jschartsc3.js
mmc501
mmc501

Reputation: 161

c3.js - hide tooltip for specific data sets

I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?

From the code below I only want the tooltip to display for data4.

var chart = c3.generate({
    bindto: '#chart3',
    data: {
      //x: 'x1',
      xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
      xs: {
            'data1': 'x1',
            'data2': 'x2',
            'data3': 'x3',
            'data4': 'x4'
      },      
      columns: [
        x1data,
        y1data,
        x2data,
        y2data,  
        x3data,
        y3data,
        x4data,
        y4data,          
      ],
      types: {
        data1: 'area',
      }, 
    },
    legend: {
        show: false
    }   

});

There is the tooltip option for show:false but that disables them all. Can it display for just 1 dataset?

Upvotes: 0

Views: 1029

Answers (1)

Vanquished Wombat
Vanquished Wombat

Reputation: 9525

The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.

  tooltip: {
    grouped: false,
    position: (data, width, height, element) => {
      if (data[0].id === 'data2'){    // <- change this value to suit your needs
          return { top: 40, left: 0 };
      }
      return { top: -1000, left: 0 };
    }
  }

EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.

Upvotes: 3

Related Questions