Highcharts Draggable Points

by Shital Agarwal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highcharts/draggable-points/master/draggable-points.js?1"></script>
<div id="container" style="height: 400px"></div>
<div id="drag"></div>
<div id="drop"></div>

CSS

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.8em;
}

JavaScript

const xMax = 3;
const yMax = 54.12778820095893;
const xTitle = "Total Visitors";
const yTitle = "Average Rank";
const reverseYAxis = true;
const series = [{
    "x": 3,
    "y": 48.95676590301972,
    "z": 665,
    "name": "Other"
  },
  {
    "x": 1,
    "y": 47.86748383207568,
    "z": 152,
    "name": "Course Details"
  },
  {
    "x": 1,
    "y": 22.02295839753467,
    "z": 5,
    "name": "Course Lists"
  },
  {
    "x": 1,
    "y": 50.779140813716666,
    "z": 1,
    "name": "Home"
  },
  {
    "x": 0,
    "y": 42.02256801319044,
    "z": 1,
    "name": "L&F for Business"
  },
  {
    "x": 0,
    "y": 2.4250645994832043,
    "z": 1,
    "name": "Corporate"
  },
  {
    "x": 0,
    "y": 9.472447552447553,
    "z": 1,
    "name": "Certifications"
  },
  {
    "x": 0,
    "y": 54.12778820095893,
    "z": 2,
    "name": "Specializations"
  },
  {
    "x": 0,
    "y": 21.478112563956795,
    "z": 4,
    "name": "Subscriptions"
  }
];
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    animation: false,
    height: 500,
    height: 400,
    zoomType: 'xy',
    type: 'bubble',
  },

  plotOptions: {
    series: {
      stickyTracking: false,
      shadow: false,
      dataLabels: {
        enabled: true,
        className: "bubble-data-label",
        format: '{point.name}',
        inside: false,
        position: 'center',
        x: 40,
        y: 20,
        overflow: 'auto',
        allowOverlap: true,
      },
      dragDrop: {
        draggableX: true,
        draggableY: true,
        resizeSide: 'left',
      },
      point: {
        events: {
          drag: function(e) {
            console.log('e.target', e.target);
            console.log('chart', chart);
            setTimeout(() => {
              chart.update({
                  series: [{
                    color: {
                      linearGradient: {
                        x1: 0,
                        x2: 0,
                        y1: 0,
                       ...