Introduce tooltip.position callback function #833

Merged
merged 1 commit into from Dec 25, 2014

Conversation

Projects
None yet
9 participants
@ku
Contributor

ku commented Dec 17, 2014

Added a callback function to control the position of the tooltip programmatically to tooltip configuration.
circle element is given if grouped option is false and region element is given if it's true.

This callback function allows to show tooltip on the top of the data points like this.

with following configuration.

        tooltip: {
          grouped: false,
          position: function (data, width, height, element) {
            var chartOffsetX = document.querySelector("#chart").getBoundingClientRect().left;
            var graphOffsetX = document.querySelector("#chart g.c3-axis-y").getBoundingClientRect().right;
            var tooltipWidth = document.getElementById('tooltip').parentNode.clientWidth;
            var x = (parseInt(element.getAttribute('cx')) ) + graphOffsetX - chartOffsetX - Math.floor(tooltipWidth/2);
            var y = element.getAttribute('cy');
            var y = y - height - 14;
            return {top: y, left: x}
          },
          contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
            d = Math.floor(d[0].value)
            return '<div id="tooltip" class="module-triangle-bottom">' + d + ' wows</div>'
          }
        }
Introduce tooltip.position callback function
to control the position of the tooltip programmatically

masayuki0812 added a commit that referenced this pull request Dec 25, 2014

Merge pull request #833 from kaizenplatform/master
Introduce tooltip.position callback function

@masayuki0812 masayuki0812 merged commit f6e6281 into c3js:master Dec 25, 2014

1 check passed

continuous-integration/travis-ci The Travis CI build passed
Details
@masayuki0812

This comment has been minimized.

Show comment
Hide comment
@masayuki0812

masayuki0812 Dec 25, 2014

Member

Looks nice. Thank you very much!!

Member

masayuki0812 commented Dec 25, 2014

Looks nice. Thank you very much!!

@aendrew

This comment has been minimized.

Show comment
Hide comment
@aendrew

aendrew Jan 10, 2015

Member

Oh rad! Good to know it can do this now. The documentation definitely needs to be updated to include this!

Member

aendrew commented Jan 10, 2015

Oh rad! Good to know it can do this now. The documentation definitely needs to be updated to include this!

@parisnakitakejser

This comment has been minimized.

Show comment
Hide comment
@parisnakitakejser

parisnakitakejser Dec 20, 2015

Thanks a lot, you save my night! 👍

Thanks a lot, you save my night! 👍

@stuartm

This comment has been minimized.

Show comment
Hide comment
@stuartm

stuartm Apr 6, 2016

Is it possible to modify top while leaving left unchanged, or vice-versa, or is it always necessary to recalculate both?

stuartm commented Apr 6, 2016

Is it possible to modify top while leaving left unchanged, or vice-versa, or is it always necessary to recalculate both?

@vkiss

This comment has been minimized.

Show comment
Hide comment
@vkiss

vkiss Jun 9, 2016

There's just one problem:
When values match on the graphic, it only show one data.

vkiss commented Jun 9, 2016

There's just one problem:
When values match on the graphic, it only show one data.

@PeddiMahesh

This comment has been minimized.

Show comment
Hide comment
@PeddiMahesh

PeddiMahesh Dec 12, 2017

If we are using xs in data how to get 'cx' and 'cy' values of point.

If we are using xs in data how to get 'cx' and 'cy' values of point.

@opensrcken

This comment has been minimized.

Show comment
Hide comment
@opensrcken

opensrcken Jul 9, 2018

This does not work for bar charts.

This does not work for bar charts.

@jayantsr83

This comment has been minimized.

Show comment
Hide comment
@jayantsr83

jayantsr83 Jul 10, 2018

How this code will work with donut chart? Any Help?

How this code will work with donut chart? Any Help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment