How to show relation between two boxes containing same data in two different treemaps

Question

I am using treemaps for a comparison purpose. I am using highchart.com for visualization.

I am showing two different treemaps side by side and hence providing a way of comparison for users. I want to link two same boxes in different treemaps. For example, I have two different treemaps and both have word "Bananas" in common. I want that when I hover on Box containing "Bananas" in first treemap, it highlights the same box of "Bananas" in 2nd treemap.

Is this even possible?

here is the code which generates the treemap.

Highcharts.chart('treemap1', {
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 1'
  }
});
Highcharts.chart('treemap2', {
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 2'
  }
});

.treemap-chart {
  float: left;
  width: 50%
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>

Image of the output here: codeoutput

Answer 1

You can do this by setting the state of a the hovered point in the mouseOver event and removing the state in the mouseOut event. Like this for the first chart, and the same for second chart changing the variable chart2 to chart1:

plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: function(event) {
          for (var i = 0; i < chart2.series[0].data.length; i++) {
            if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
              chart2.series[0].data[i].setState('hover')
            }
          }
        },
        mouseOut: function(event) {
          for (var i = 0; i < chart2.series[0].data.length; i++) {
            if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
              chart2.series[0].data[i].setState('')
            }
          }
        }
      }
    }
  }
},

var chart1 = Highcharts.chart('treemap1', {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(event) {
            for (var i = 0; i < chart2.series[0].data.length; i++) {
              if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
                chart2.series[0].data[i].setState('hover')
              }
            }
          },
          mouseOut: function(event) {
            for (var i = 0; i < chart2.series[0].data.length; i++) {
              if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
                chart2.series[0].data[i].setState('')
              }
            }
          }
        }
      }
    }
  },
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 1'
  }
});

var chart2 = Highcharts.chart('treemap2', {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(event) {
            for (var i = 0; i < chart1.series[0].data.length; i++) {
              if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
                chart1.series[0].data[i].setState('hover')
              }
            }
          },
          mouseOut: function(event) {
            for (var i = 0; i < chart1.series[0].data.length; i++) {
              if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
                chart1.series[0].data[i].setState('')
              }
            }
          }
        }
      }
    }
  },
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 2'
  }
});

 .treemap-chart {
   float: left;
   width: 50%
 }

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>

Working jsfiddle example: https://jsfiddle.net/ewolden/czn1rjxu/2/