In a unique scenario, I am required to compare various items and display the results in a chart. The user inputs two, three, or four article IDs and receives the corresponding data displayed in a chart. The issue arises when the user enters only two or three article IDs; in the chart legend, there are still names of lines without any data associated with them.
$scope.chartConfig1 = getChartConfigWithYaxisPlotLines('Production');
$scope.chartConfig1.series.push({
id: 1,
name: "Item " + firstId,
data: $scope.data[0],
tooltip: {
valueDecimals: 2
}
}, {
id: 2,
name: "Item " + firstId,
color: "#1ea775",
data: $scope.data[1],
tooltip: {
valueDecimals: 2
}
}, {
id: 3,
name: "Item " + firstId,
data: $scope.data[2],
tooltip: {
valueDecimals: 2
}
}, {
id: 4,
name: "Item " + firstId,
data: $scope.data[3],
tooltip: {
valueDecimals: 2
}
},{
id: 5,
name: "Item " + secondId,
data: $scope.data[4],
tooltip: {
valueDecimals: 2
}
}, {
id: 6,
name: "Item " + secondId,
data: $scope.data[5],
tooltip: {
valueDecimals: 2
}
}, {
id: 7,
name: "Item " + secondId,
data: $scope.data[6],
tooltip: {
valueDecimals: 2
}
}, {
id: 8,
name: "Item " + secondId,
data: $scope.data[7],
tooltip: {
valueDecimals: 2
}
},{
id: 9,
name: "Item " + thirdId,
data: $scope.data[8],
tooltip: {
valueDecimals: 2
}
}, {
id: 10,
name: "Item " + thirdId,
data: $scope.data[9],
tooltip: {
valueDecimals: 2
}
}, {
id: 11,
name: "Item " + thirdId,
data: $scope.data[10],
tooltip: {
valueDecimals: 2
}
}, {
id: 12,
name: "Item " + thirdId,
data: $scope.data[11],
tooltip: {
valueDecimals: 2
}
}
);
The legend displays Item followed by the article ID inputted during submission, so when comparing only two articles, the legend shows "Item 1," "Item 2," "Item undefined," "Item undefined." Everything works fine when all four inputs are provided. https://i.stack.imgur.com/oFugp.jpg
Is it possible to hide the name in the legend on Highcharts if the data is null or undefined? Thank you for any insight.