score:1

Accepted answer

first of all, you need to convert your data to a readable format for highcharts.

api: https://api.highcharts.com/highmaps/series.map.data

for example, create separate arrays for each year:

let data2015 = [
    ['py-ag', 10, 20, 30],
    ['py-bq', 40, 50, 60]
  ];  

let data2016 = [
    ['py-ag', 15, 25, 35],
    ['py-bq', 45, 55, 65]
  ];

the additional data needs to be connected to the chart, by the series.keys:

api: https://api.highcharts.com/highcharts/plotoptions.series.keys

plotoptions: {
  series: {
    keys: ['hc-key', 'total', 'hombre', 'mujer']
}

then, you can easily refer to this data in the tooltip.formatter

api: https://api.highcharts.com/highcharts/tooltip.formatter

tooltip: {
  formatter: function() {
    let point = this.point;
    return '<b>' + point.name + '</b><br>' + 'total: ' + point.options.total + '<br>' + 'hombre: ' + point.options.hombre + '<br>' + 'mujer: ' + point.options.mujer
  }
}

for updating data by drop-down list use series.update method:

api: https://api.highcharts.com/class-reference/highcharts.series#update

  document.getelementbyid('select').onchange = function() {
    let option = this.value;
    if (option === 'data2015') {
      chart.series[0].update({
        data: data2015,
        name: '2015'
      });
    }
    if (option === 'data2016') {
      chart.series[0].update({
        data: data2016,
        name: '2016'
      });
    }
  };

demo: https://jsfiddle.net/blacklabel/41phgcen/


Related Query

More Query from same tag