Updating Highcharts column chart based on drop down-menu - highcharts

Question

I'm trying to have Highcharts do the following: I want to show a column chart with three columns. The two first are to remain constant, the third is to be updated multiple times based on what the user chooses from a drop down-menu.
Choosing from the drop down-menu, I am able to have the third column update. If it's showing "Name 3" initially, choosing "Name 4" from the drop down menu will correctly replace the column. Choosing "Name 5" causes another correct replacement. However, if I then choose "Name 3" again, only the label will update, while the column and the y-value in the tooltip will not. Thus, it will say "Name 3", but use the y-value for "Name 5". How do I fix this behaviour?
The important thing here is user control of column 3. It would be okay to only show 2 column initially, if it's easier.
Code:
var data = {
"10 - Name 1": [700000],
"1001 - Name 2": [750000],
"1000 - Name 3": [800000],
"1002 - Name 4": [900000],
"1003 - Name 5": [950000]
};
var chart = Highcharts.chart('fig8', {
chart: {
type: 'column',
animation: true
},
series: [{
name: "10 - Name 1",
data: data["10 - Name 1"]
}, {
name: "1001 - Name 2",
data: data["1001 - Name 2"]
}, {
name: "1000 - Name 3",
data: data["1000 - Name 3"]
}],
title: {
text: 'Some metric'
},
subtitle: {
text: 'Choose unit from drop down to alter third column'
},
xAxis: {
labels: {
enabled: false
}
}
});
$("#sel").change(function() {
chart.series[2].update({
name: this.value,
data: data[this.value]
});
});
Here's a stripped down example: https://jsfiddle.net/RuneS/soh8vw79/10/

Answer 1

#jlbriggs is correct. Although the docs for update() don't say anything about it, it is mentioned in the docs for setData(): When updating series data, the default behavior is to update the values in the original data array instead of replacing the whole array.
In your case, that means that "Name 3"'s value is overwritten by the others' values when you select from the dropdown. There are at least two ways to fix this:
Force Highcharts to replace the data array by calling setData() with the updatePoints parameter instead of sending the data with update():
$("#sel").change(function() {
var unit = this.value,
val = data[unit],
ser = chart.series[2];
ser.update({ name: unit }, false);
//... false): Replace the series' data array instead of updating its values,
//(which would alter the original array in the global `data` object).
//https://api.highcharts.com/class-reference/Highcharts.Series#setData
ser.setData(val, true, true, false);
});
https://jsfiddle.net/soh8vw79/22
Don't give Highcharts the original array, but a copy of it. That way, updating the values won't affect the original data (similar to #jlbriggs solution). Added bonus: Smooth animation:
...
series: [{
name: "10 - Name 1",
data: data["10 - Name 1"]
}, {
name: "1001 - Name 2",
data: data["1001 - Name 2"]
}, {
name: "1000 - Name 3",
//Here, we use `.slice()` to make a copy of the original array,
//so that future updates don't change the original values in the global `data` object:
data: data["1000 - Name 3"].slice()
}],
...
https://jsfiddle.net/soh8vw79/23