Hide or Disable Legend or Label in the end Highcharts line

Question

How to hide or disable legend or label in the end Highcharts line, not the legend outside chart? See my picture below that's marked with red color.

Here's my code:

Highcharts.chart('container1', {
    chart: {
        scrollablePlotArea: {
            minWidth: 700
        }
    },
    title: {
        text: ['Grafik Pencapaian  <?php echo $title1 ?> (%)' ]
    },
    subtitle: {
        text: 'Preventive Maintenance PM-03: (Tanggal : <?php echo $start ?> s/d <?php echo $end ?>)</a>'
    },
    xAxis: {
        //tickInterval: 7 * 24 * 3600 * 1000, // one week
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
            align: 'center',
            y: 10
        },
        categories: [
                <?php 
                foreach ($chart as $key => $x_axis ) : 
                        echo "'".$x_axis->tanggal."',";
                endforeach; 
                ?>
                ]
    },
    yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: true
        },
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function (e) {
                        hs.htmlExpand(null, {
                            pageOrigin: {
                                x: e.pageX || e.clientX,
                                y: e.pageY || e.clientY
                            },
                            headingText: this.series.name,
                            maincontentText: this.y + ' %',
                            width: 200
                        });
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    series: [{
        name: 'Selesai <?php echo $title1 ?> (%)',
        color : '#83f442',
        dataLabels: {
                enabled: true,
                y: 25,
                color : '#488426',
                format: '{y} % <br/>',
                showInLegend: false
            },
        data: [
                <?php 
                foreach ($chart as $key => $series ) : 
                        echo number_format( $series->actual/$series->plan , 4, '.', '')*100 .",";
                endforeach;?>
              ]
    }, {
        name: 'Year To Date <?php echo $title1 ?> (%)',
        color : '#a02cb2',
        dataLabels: {
                enabled: true,
                y: 40,
                color : '#a02cb2',
                format: '{y} % <br/>',
                showInLegend: false
            },
        data: [
                <?php 
                $cum_plan = 0;
                $cum_actual = 0;
                foreach ($chart as $key => $series ) : 
                        $cum_plan = $cum_plan + $series->plan;
                        $cum_actual = $cum_actual + $series->actual;
                        echo number_format( $cum_actual/$cum_plan , 4, '.', '')*100 .",";
                endforeach;?>
              ]
    }, {
        name: 'Target <?php echo $title1 ?> (%)',
        color : '#ffaaaa',
        dataLabels: {
                enabled: true,
                y: -10,
                color : '#ffaaaa',
                format: '{y} % <br/>',
                showInLegend: false
            },
        data: [
                <?php 
                foreach ($chart as $key => $series ) : 
                        echo number_format( $series->plan/$series->plan , 4, '.', '')*100 .",";
                endforeach;?>
              ]
    }]
});

Answer 1

I assume you probably included the series-label.js file somewhere in your main code and that makes the labels appear by default. You have two options here:

1. Find and remove the line of code where you have included series-label.js. It looks like something like this:

   <script src="https://code.highcharts.com/modules/series-label.js"></script>
   

2. You can manually disable series labels using the label option in the plotOptions.series block. In your code by modifying this section it looks like something like this (note the label section where enabled: false):

   plotOptions: {
       line: {
           dataLabels: {
               enabled: true
           },
           enableMouseTracking: true
       },
       series: {
           cursor: 'pointer',
           label: {
                enabled: false
           }
           point: {
                events: {
                    click: function (e) {
                         hs.htmlExpand(null, {
                              pageOrigin: {
                                    x: e.pageX || e.clientX,
                                    y: e.pageY || e.clientY
                              },
                              headingText: this.series.name,
                              maincontentText: this.y + ' %',
                              width: 200
                         });
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    },
   

I have added a simple demo for the second solution. The part regarding disabling labels is commented so labels are shown on chart series. If you comment out that part the labels will not be shown.

Demo: http://jsfiddle.net/n95Lb6fm/