Updating highcharts data labels for charts showing ranges (distinguishing between upper and lower data labels))

Question

I would like to update the data labels for a chart showing ranges dynamically.

I've create a JSFiddle here with buttons (based on one of the HighChart demos for a dumbbell chart). By default I want to hide the upper data labels in the range but programmatically I would like to be able to turn on and off the labels. Below is a code snippet with just the relevant bits left in and here is link to a working JSFiddle: https://jsfiddle.net/uja5y1rz/

It was not clear to me from the API how to distinguish between the low and high data labels but it seemed to work with an array (and maybe I shouldn't be doing like this...). The first array element defines the parameters for the upper label and the second the lower datable. In the series, I have:

    series: [{
        name: 'Life expectancy change',
        data: data,
        dataLabels: [{
            enabled: true
        },
        {
            enabled: false
        }]
    }]

I want to update the data labels, after the chart is drawn and that's where I'm having problems. I really want to do this a JSON object. I can make them both appear (e.g, below will make them both appear):

                    let updateConfig = {
                        series: [{
                            dataLabels: [{
                                        enabled: true
                                },
                                {
                                        enabled: true
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

But when I try to show the upper one and hide the lower one, it no longer works - the higher data label is still visible.

document.getElementById('lowerLabels').addEventListener('click', () => {
                    let updateConfig = {
                        series: [{
                            dataLabels: [{
                                        enabled: false
                                },
                                {
                                        enabled: true
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

Is there a better way to do this?

Thank you!

David

const data = [{
    name: 'Austria',
    low: 70.1,
    high: 81.3
}, {
    name: 'Belgium',
    low: 71.0,
    high: 81.9
}];

let myChart = Highcharts.chart('container', {

    chart: {
        type: 'dumbbell',
        inverted: true
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: 'Life Expectancy (years)'
        }
    },

    series: [{
        name: 'Life expectancy change',
        data: data,
        dataLabels: [{
            enabled: true
        },
        {
            enabled: false
        }]
    }]

});

  

document.getElementById('showLabels').addEventListener('click', () => {
                                        console.log("button clicked")
                    let updateConfig = {
                        series: [{
                            dataLabels: [{
                                        enabled: true
                                },
                                {
                                        enabled: true
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

document.getElementById('hideLabels').addEventListener('click', () => {
                    let updateConfig = {
                        series: [{
                            dataLabels: [{
                                        enabled: false
                                },
                                {
                                        enabled: false
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

document.getElementById('upperLabels').addEventListener('click', () => {
                    let updateConfig = {
                        series: [{

                            dataLabels: [{
                                        enabled: true
                                },
                                {
                                        enabled: false
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,true,true);
});

document.getElementById('lowerLabels').addEventListener('click', () => {
                    let updateConfig = {
                        series: [{
                            dataLabels: [{
                                        enabled: false
                                },
                                {
                                        enabled: true
                                }]
                                }]
                  };
                
                    myChart.update(updateConfig,true,false,true);
});

Answer 1

It's not fully supported by Highcharts to handle data labels separately in a dumbbell series. The best way seems to operate directly on data-label elements.

For example:

document.getElementById('upperLabels').addEventListener('click', () => {
  myChart.series[0].points.forEach(point => {
    point.dataLabel.hide();
    point.dataLabelUpper.show();
  });
});

---

Live demo: https://jsfiddle.net/BlackLabel/27ca0mon/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#show