Highcharts – Keep tooltip showing on click

by

I just whipped this up. When you click a point it will persist the tooltip. It does this by cloning the tooltip svg element and appending it to the plot.

Here’s a fiddle.

$(function () {
    cloneToolTip = null;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() { 
                            if (cloneToolTip)
                            {
                                chart.container.firstChild.removeChild(cloneToolTip);
                            }
                            cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                            chart.container.firstChild.appendChild(cloneToolTip);
                        }
                    }
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

More Related Contents:

  1. How do I drag multiple elements at once with JavaScript or jQuery?
  2. Is there a full working example for a jqGrid ColumnChooser? [closed]
  3. Queue AJAX calls
  4. Can I make a not submit a form?
  5. How can I custom-format the Autocomplete plug-in results?
  6. How to reload current page without losing any form data?
  7. Making custom right-click context menus for my web-app
  8. How to create a jQuery plugin with methods?
  9. jQuery UI – Close Dialog When Clicked Outside
  10. animating addClass/removeClass with jQuery
  11. Using jQuery, Restricting File Size Before Uploading
  12. jQuery UI accordion that keeps multiple sections open?
  13. How can I bind to the change event of a textarea in jQuery?
  14. Get query string parameters url values with jQuery / Javascript (querystring)
  15. Using jQuery how to get click coordinates on the target element
  16. Benefits vs. Pitfalls of hosting jQuery locally [closed]
  17. jQuery UI Tabs – How to Get Currently Selected Tab Index
  18. Calling a function on Bootstrap modal open
  19. How to make supported on all browsers? Any alternatives?
  20. How to disable tooltip in the browser with jQuery?
  21. How to use jQuery UI Calendar/Date PIcker for week rather than day?
  22. jquery-ui-dialog – How to hook into dialog close event
  23. Differences between document.ready and $function [duplicate]
  24. What is the role of src and dist folders?
  25. How to get value from jQuery UI slider?
  26. showing progressbar progress with ajax request
  27. changing text periodically in a span from an array with jquery
  28. Remove Datepicker Function dynamically
  29. Bootstrap and jQueryUI Conflict
  30. How to write a simple jQuery plugin [closed]

Leave a Comment