Highcharts separate datalabels per series

Question

I have the following high charts:

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'scatter',
                    zoomType: 'xy'
                },
                title: { text: 'Report' },
                xAxis: { title: { enabled: true, text: 'Score' },
                    startOnTick: true, endOnTick: true, showLastLabel: true, min: -10, max: 11 },
                yAxis: { title: { text: 'Question', align: 'left' }, min: 0, max: 27, reversed: true, categories: categories, labels: {enabled: true}},
                tooltip: { formatter: function() { return '' + this.x +' score'; } },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 320,
                    y: 35,
                    floating: true,
                    backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
                    borderWidth: 1,
                    width: 200,
                    height: 200
                },
                plotOptions: {
                    linewidth: 10,
                    series: {
                        shadow: true,
                        dataLabels: {
                            enabled: true,
                            align: 'center',
                            verticalAlign: 'bottom',
                            rotate: 0,
                            formatter: function() {
                                return '<b style="color:gray">' + this.point.x + '</b>';
                            },
                            style: {
                                     color: '#000',
                                     font: 'bold 18px "Trebuchet MS", Verdana, sans-serif;'
                                  },
                            x:-25,
                            y:7
                        }
                    },
                    scatter: {
                        marker: {
                            enable: false,
                            radius: 15,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        }
                    }
                },
                series: [{
                    id:'def',
                    name: 'def',
                    color: 'rgba(223, 83, 83, .5)',
                    data: [[10,2],[9,3],[9,4],[5,5],[6,6],[7,7],[9,8],[8,9],[9,11],[7,12],[6,13],[8,14],[7,15],[8,16],[6,18],[8,19],[9,20],[7,22],[6,23],[9,25],[9,26]]

                }, {
                    id:'abc',
                    name: 'abc',
                    color: 'rgba(119, 152, 191, .5)',
                    data: [[6,2],[3.5,3],[7.5,4],[9,5],[3.5,6],[5,7],[9,8],[5,9],[8.5,11],[8.5,12],[8.5,13],[-1,14],[10,15],[8,16],[7.5,18],[7,19],[7,20],[5,22],[8,23],[7,25],[6.5,26]]

                }]
            });

I want to have different styles for the datalabels, so abc pulls to the left (using x parameter) and def pulls to the right.

Currently it's set globally for both.

If i try:

            chart.series[1].options.dataLabels.x=25;
            chart.redraw()

Nothing happens, datalabel is the same.

Any ideas on how to do this?

Answer 1

You can format data labels for each series as in this example:

Setting series-level data label options

$(function () {
$('#container').highcharts({

    chart: {
        marginRight: 50
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {
            dataLabels: {
                enabled: true,
                align: 'left',
                crop: false,
                style: {
                    fontWeight: 'bold'
                },
                x: 3,
                verticalAlign: 'middle'
            },
            y: 54.4
        }]
    }]

});
});