CODEWITHSUNDEEP
javascripthighchartshighmaps
dracodormiens
dracodormiens

Reputation: 520

Highcharts: TreeMap Select State not working

http://jsfiddle.net/sgrg93/7z6r4gkk/

plotOptions: {
  treemap: {
    allowPointSelect: true,
    states: {
      hover: {
        borderColor: "red"
      }
    }
  }
},

In the above code, I've used hover state which enables me to see red colored borders when I hover on them. Also when I select multiple tree-sections, the red colored borders are maintained.

Now what I require is that only when I select tree-sections, red colored borders are seen, and on hover, no change of borders is observed.

Something like this (which is not working)

plotOptions: {
  treemap: {
    allowPointSelect: true,
    states: {
      select: {     //hover changed to select
        borderColor: "red"  //change color only on select and not on hover
      }
    }
  }
},

Is there any way to achieve this?

Upvotes: 0

Views: 579

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

To have your treemap sections have red borders only when selected, and not on the hover state, try the following:

plotOptions: {
    treemap: {
        allowPointSelect: true,
        point: {
            events: {
                select: function () {
                    this.update({
                        borderColor: 'red', borderWidth: 4
                    });                
                }
            }
        }
    }
}

What you're doing here is setting a select event for your point (the item in the treemap you want your users to select) and then asking it to update the border color and width (I added the width just to better illustrate the change).

Here's a modified fiddle you can review: http://jsfiddle.net/brightmatrix/7z6r4gkk/5/

I hope this is helpful for you!

Upvotes: 1

Related Questions