Mohammed mansoor
Mohammed mansoor

Reputation: 819

how to set tooltip content of scatter chart in c3 chart?

I am trying to plot a c3 scatter chart. On mouse hover on tool tip, it shows data set name. Instead i want to display a custom text on that tool tip. My code snippet is below.current image

var chart = c3.generate({
                    bindto: '#scatter',
                    data: {
                        xs: {
                            positive: 'positive_x',
                            negative: 'negative_x',
                            neutral: 'neutral_x'
                        },
                        columns: [
                            $scope.positiveXvalue,
                            $scope.positiveYvalue,
                            $scope.negativeXvalue,
                            $scope.negativeYvalue,
                            $scope.neutralXvalue,
                            $scope.neutralYvalue
                        ],
                        colors: {
                            positive: '#008000',
                            negative: '#FF0000',
                            neutral: '#A9A9A9'
                        },
                        type: 'scatter'
                    },
                    axis: {
                        x: {
                            label: 'Sentiment',
                            tick: {
                                fit: false
                            }
                        },
                        y: {
                            label: 'Followers'
                        }
                    });

How to add a custom label on mouse hover(as tool tip)?

Upvotes: 2

Views: 856

Answers (1)

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

You must be looking for tooltip.format.title.

For a scatter plot there is some difference.

Function specified at tooltip.format.title recieve coordinates of hovered data-point. For a traditional line/bar chart it is just integer index.
But for scatter plot it goes in 'x.y' format. So you may have a need to split it:

tooltip: {
  format: {
    title: function (coord) {
        var xy = coord.toString().split('.');
        return 'Data at [' + xy[0] + ',' + xy[1] + ']';
    }
  }
}

Further implementation depends on how your custom titles are stored.

Upvotes: 1

Related Questions