0

I'm developing a web app where I use Highcharts.js as charting library. In a line graph in Highcharts you can get a tooltip when hovering a point in the graph. You can also get a crosshair (vertical line) at the same point.

What I would like is a way to have a crosshair that is always showing and that the user can drag horizontally. A tooltip should be shown for the point where the crosshair is located. This makes it possible for the user to "save" a position in the graph so that it doesn't disappear when the user no longer hover the graph. The tooltip should only be shown where the crosshair is and not if the user hover some other area of the graph.

Does anyone know if this is possible in Highcharts?

1 Answer 1

0

You could use the draggable points plugin and create a custom symbol for a bubble marker.

JSFiddle demo

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.crosshair = function (x,y,w,h,elem) {
		var ret = [],
    		chart;
    if (elem.element) {
    	chart = elem.element.farthestViewportElement.parentElement.id.split('-');
      chart = Highcharts.charts[chart[chart.length - 1]];
      ret = [
      	'M', x, 0,
        'L', x, chart.plotHeight
      ];
    }
    return ret;
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.crosshair = Highcharts.SVGRenderer.prototype.symbols.crosshair;
}

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        animation: false
    },
    
    title: {
        text: 'Highcharts draggable points demo'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stickyTracking: false
        },
        line: {
            cursor: 'ns-resize'
        },
        bubble: {
            cursor: 'move'
        }
    },

    
    tooltip: {
      formatter: function() {
        if (this.point.series.userOptions.noTooltip) return false;

        var tooltip = this.series.chart.tooltip;
        return tooltip.defaultFormatter.call(this, tooltip);
      }
    },

    series: [ {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
        type: 'column',
        minPointLength: 2
    }, {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        draggableY: true
    }, {
    		noTooltip: true,
        data: [[10,10,10]],
        draggableX: true,
        dragMinX: 0,
        dragMaxX: 11,
        maxSize: 1,
        minSize: 1,
        type: 'bubble',
        marker: {
        	symbol: 'crosshair',
          lineWidth: 2,
          states: {
          	hover: {
            	enabled: false
            }
          }
        },
        minPointLength: 2,
        showInLegend: false
    }]

});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="container" style="height: 400px"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.