CODEWITHSUNDEEP
javascripthighcharts
Ujjawal Bhandari
Ujjawal Bhandari

Reputation: 1372

Unselect and Select Event

I am using this fiddle - https://jsfiddle.net/BlackLabel/3tqkjLoh/6/

Here the issue - When I select other point from the previous point of the pie (without unselecting the previous one). It shows the status of unselect event of the previous point. I want the status of both 'selected the current one and unselected the previous one'

const content = document.getElementById('content');
const chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      point: {   
        events: {
          select: function(event) {
            const selected = this;      
            if (selected) {
              content.textContent = selected.options.name
              /* do something */
              // fetch(`/api?id=${ selected.options.id }`)
            } else {
              content.textContent = 'nothing'
            }
          },
          unselect: function () {
            content.textContent = 'unselect event: ' + this.options.name
          }
        }
      }
    },
  },

  series: [{
    data: [{
      y: 20,
      "name": "click me",
    }, {
      y: 60,
      "name": "click me foo",
      selected: true,
      sliced: true,
    }, {
      y: 100,
      "name": "click me bar",
    }, {
      y: 100,
      "name": "click me baz",
    }, ]
  }]
});

Upvotes: 0

Views: 936

Answers (1)

priyanshu sinha
priyanshu sinha

Reputation: 625

Here's the problem, selected event triggers before unselect event So basically, content.textContent is first set to selected.options.name, and then again sets to 'unselect event: ' + this.options.name and then the latest value is appeared onto the DOM.

https://jsfiddle.net/devatquarxps/5yb0wehd/7/

const content = document.getElementById('content');
const chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      point: {

        events: {
          select: function(event) {
            const selected = this;
   selected ? content.textContent ='select event: ' + selected.options.name + ' | ' : content.textContent = ''
      
          },
          unselect: function () {
          	content.textContent =content.textContent + '  unselect event: ' + this.options.name
          }
        }
      }
    },
  },

  series: [{
    data: [{
      y: 20,
      "name": "click me",
    }, {
      y: 60,
      "name": "click me foo",
      selected: true,
      sliced: true,
    }, {
      y: 100,
      "name": "click me bar",
    }, {
      y: 100,
      "name": "click me baz",
    }, ]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<h3 style="color: red">open console panel</h3>
<p>
  After clicking, [selected and sliced] status is not synchronized update；
</p>
<div>
  <h5>Show to users</h5>
  <h6>You have chosen :</h6>
  <p id="content"></p>
</div>
<div id="container" style="height: 400px"></div>

Upvotes: 1

Related Questions