Chart

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart = Highcharts.chart('container', {
  title: {
    text: 'Monthly Average Temperature'
  },
  yAxis: {
    title: {
      text: 'Temperature'
    },
    labels: {
      formatter: function() {
        return this.value + '°';
      }
    }
  },
  series: [{
    type: 'column',
    dragDrop: {
      draggableY: true,
      draggableX: true,
      groupBy: 'groupId'
    },
    allowPointSelect: true,
    point: {
      events: {
        select: function() {
          
        },
        unselect: function(e) {
        const chart = this.series.chart;
          let chartData = e.target.series.data;
          let {
            newPoint,
            newPoints
          } = e;
          console.log('newPoint', newPoint);
          console.log('newPoints', newPoints);
          					console.log(Object.keys(newPoints).map((key) => newPoints[key])); 
					
					Object.keys(newPoints).map((key) => newPoints[key]).forEach(newPoint => {
						newPoint.point.graphic.toFront();
						
						newPoint.point.update({
							selected: true
						}, false)
					});
          chart.redraw();

        },
     

      }
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

  }]
});