CODEWITHSUNDEEP
javascripthighcharts
raven
raven

Reputation: 455

Highcharts - Suppress points being dragged on drag event

I'm new to Highcharts - it seems you can only trigger drag events if the appropriate dragDrop events are defined and enabled on a series. E.g. https://api.highcharts.com/highcharts/plotOptions.series.dragDrop

How can I suppress the points actually being moved around in my chart? I have tried setting allowPointSelect: false and disabling both draggableX and draggableY but of course doing that don't fire any drag events. I have also tried event.preventDefault but no luck

What I'm basically looking for is to have a user drag over a range in a line/area chart from startX/Y to endX/Y and display the results to the user (which I can successfully get using mouseOver - a nice feature!)

Upvotes: 0

Views: 253

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

For such a feature, you don't need to use draggable-points module. A simple custom solution with a crosshair and dynamically added/removed plot-lines will be enough. For example:

  chart: {
    animation: false,
    events: {
      load: function() {
        const chart = this;
        this.series[0].points.forEach(point => {

          point.graphic.on('mousedown', function() {
            chart.draggedPoint = point;
            chart.xAxis[0].update({
              plotLines: [{
                width: 2,
                color: 'grey',
                dashStyle: 'ShortDash',
                value: point.x
              }]
            });
          });
        });

        document.body.addEventListener('mouseup', function() {
          chart.draggedPoint = null;
          chart.xAxis[0].update({
            plotLines: []
          });
        });
      }
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/rsuj93at/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

Upvotes: 0

Related Questions