Change the series title in a Highcharts drill down legend - highcharts

Question

I have created a Highcharts line chart that compares averaged ratings for states for the past ten years. The y axis contains the years and there can be multiple states selected for comparison. Each point on the chart drills down to a bar chart that shows the sub-categories that created the average you see on the principal chart for that particular state on that particular year. This is what I wanted it to do.
But then I noticed, quite by accident, that if I click on one of the years on the y axis, it also drills down and shows a comparison of the sub-categories for each of the states currently appearing on the principal chart for the particular year selected. I really like this feature. However, there is one problem I can't resolve, which is that the legend on this particular drill down doesn't show the names of the states but rather shows all of them as the name of the year that was selected. This is desirable on the drill down from a point on the main chart as there is only ever one state and showing the year is helpful for the user, but here it is confusing. It would be great if on the year drill down the legend would show the names of the selected states.
Can anybody give me some guidance on how to achieve this? Many thanks in advance!
Here's a link to the jsfiddle: https://jsfiddle.net/sstoker/gx5bho9k/424/
Here's the chart code including the first two states (as you'll see in the jdfiddle, there are many more, but I cut them off here for the sake of brevity):
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'IDD-Mex Indice'
},
yAxis: {
title: {
text: 'Índice'
}
},
xAxis: {
type: 'category'
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Aguascalientes', //Aguascalientes start
data: [{
name: '2010',
y: 7.696,
drilldown: 'ag2010'
}, {
name: '2011',
y: 8.665,
drilldown: 'ag2011'
}, {
name: '2012',
y: 7.110,
drilldown: 'ag2012'
}, {
name: '2013',
y: 4.816,
drilldown: 'ag2013'
}, {
name: '2014',
y: 7.670,
drilldown: 'ag2014'
}, {
name: '2015',
y: 8.026,
drilldown: 'ag2015'
}, {
name: '2017',
y: 9.201,
drilldown: 'ag2017'
}, {
name: '2018',
y: 10.000,
drilldown: 'ag2018'
}]
}, {
name: 'BCN', //BCN Start
data: [{
name: '2010',
y: 6.515,
drilldown: 'bc2010'
}, {
name: '2011',
y: 4.941,
drilldown: 'bc2011'
}, {
name: '2012',
y: 4.369,
drilldown: 'bc2012'
}, {
name: '2013',
y: 4.936,
drilldown: 'bc2013'
}, {
name: '2014',
y: 5.512,
drilldown: 'bc2014'
}, {
name: '2015',
y: 5.066,
drilldown: 'bc2015'
}, {
name: '2017',
y: 1.855,
drilldown: 'bc2017'
}, {
name: '2018',
y: 5.594,
drilldown: 'bc2018'
}],
},
And here is the drilldown code which I cut off here after the same two states as above:
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
series: [{
id: 'ag2010', //Aguascalientes start
name: '2010',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.764],
['Índice Democracia de las Instituciones', 7.601],
['Índice Democracia Social', -0.161],
['Índice Democracia Económica', 0.478],
['Desarrollo Democrático ', 7.696]
]
}, {
id: 'ag2011',
name: '2011',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.653],
['Índice Democracia de las Instituciones', 7.087],
['Índice Democracia Social', -0.15],
['Índice Democracia Económica', 0.714],
['Desarrollo Democrático ', 8.665]
]
}, {
id: 'ag2012',
name: '2012',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.653],
['Índice Democracia de las Instituciones', 7.087],
['Índice Democracia Social', -0.15],
['Índice Democracia Económica', 0.714],
['Desarrollo Democrático ', 8.665]
]
}, {
id: 'ag2013',
name: '2013',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 3.394],
['Índice Democracia de las Instituciones', 5.054],
['Índice Democracia Social', 0.087],
['Índice Democracia Económica', 0.031],
['Desarrollo Democrático ', 4.816]
]
}, {
id: 'ag2014',
name: '2014',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.807],
['Índice Democracia de las Instituciones', 4.860],
['Índice Democracia Social', 0.536],
['Índice Democracia Económica', 0.855],
['Desarrollo Democrático ', 7.670]
]
}, {
id: 'ag2015',
name: '2015',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.408],
['Índice Democracia de las Instituciones', 5.181],
['Índice Democracia Social', 0.621],
['Índice Democracia Económica', 1.169],
['Desarrollo Democrático ', 8.026]
]
}, {
id: 'ag2017',
name: '2017',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.166],
['Índice Democracia de las Instituciones', 5.980],
['Índice Democracia Social', 0.755],
['Índice Democracia Económica', 1.350],
['Desarrollo Democrático ', 9.201]
]
}, {
id: 'ag2018',
name: '2018',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 6.553],
['Índice Democracia de las Instituciones', 5.319],
['Índice Democracia Social', 0.499],
['Índice Democracia Económica', 1.495],
['Desarrollo Democrático ', 10.000]
]
}, {
id: 'bc2010', //BCN start
name: '2010',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.346],
['Índice Democracia de las Instituciones', 4.870],
['Índice Democracia Social', -0.822],
['Índice Democracia Económica', 1.544],
['Desarrollo Democrático', 6.515]
]
}, {
id: 'bc2011',
name: '2011',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.274],
['Índice Democracia de las Instituciones', 3.65],
['Índice Democracia Social', 0.861],
['Índice Democracia Económica', 0.262],
['Desarrollo Democrático ', 4.941]
]
}, {
id: 'bc2012',
name: '2012',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 3.401],
['Índice Democracia de las Instituciones', 4.238],
['Índice Democracia Social', 0.529],
['Índice Democracia Económica', 0.056],
['Desarrollo Democrático ', 4.369]
]
}, {
id: 'bc2013',
name: '2013',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 4.297],
['Índice Democracia de las Instituciones', 3.964],
['Índice Democracia Social', 0.907],
['Índice Democracia Económica', 0.671],
['Desarrollo Democrático ', 4.936]
]
}, {
id: 'bc2014',
name: '2014',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.565],
['Índice Democracia de las Instituciones', 3.581],
['Índice Democracia Social', 0.696],
['Índice Democracia Económica', -0.008],
['Desarrollo Democrático', 5.512]
]
}, {
id: 'bc2015',
name: '2015',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.913],
['Índice Democracia de las Instituciones', 2.833],
['Índice Democracia Social', 0.306],
['Índice Democracia Económica', -0.05],
['Desarrollo Democrático ', 5.066]
]
}, {
id: 'bc2017',
name: '2017',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 2.511],
['Índice Democracia de las Instituciones', 3.621],
['Índice Democracia Social', 0.577],
['Índice Democracia Económica', -0.315],
['Desarrollo Democrático ', 1.855]
]
}, {
id: 'bc2018',
name: '2018',
type: 'bar',
data: [
['Índice Democracia de los Ciudadanos', 5.317],
['Índice Democracia de las Instituciones', 3.764],
['Índice Democracia Social', 0.468],
['Índice Democracia Económica', -0.197],
['Desarrollo Democrático ', 5.594]
]
},

Answer 1

You can use dirlldown and drillup events of chart to change the title.
Fiddle example: https://jsfiddle.net/zar9en0b/
chart: {
type: 'line',
events: {
drilldown: function(e) {
chart.setTitle({ text: e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: 'IDD-Mex Indice'});
}
}
}
API Reference :
http://api.highcharts.com/highcharts#chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup