如何删除 Highcharts 中 SINGLE 图例的图例符号？

Question

I'm trying to change a single legend in Highcharts. Since Plot Lines and Bands can't have a legend, I've added an empty series so that when I select/de-select that legend, it would show/hide the plot lines. Since my plot lines are vertical, I used this (code below) as my working around:

legend: {
        useHTML: true,
        labelFormatter: function() {
                        if (this.name == "Empty Series") {
                            return '<div class="my-plot-line-symbol" style="padding- 
                            left: 5px"> '+ this.name + '</div>';
                        } else {
                            return this.name;
                        }
                    }   
                },

...with the class being just a left border.

However, I cannot seem to remove the legend assigned to the empty series that I have. Basically it appears like this:

<> | My Plot Lines

(diamond as the default legend, "|" as the "class" I added)

How can I remove the default legend for that single empty series?

Answer 1

Set marker.radius for the empty series to 0 :

    series: [..., {
        name: 'Collar',
        type: 'scatter',
        marker: {
            radius: 0
        }
    }]

---

Live demo: http://jsfiddle.net/BlackLabel/uhcnr8mf/

API Reference: https://api.highcharts.com/highcharts/series.scatter.marker.radius

Answer 2

Why are you returning HTML/JSX within the string? You could just simply do this..

return <div>
  ...
  ...
  ...
</div>

Is it not a valid syntax in vue.js? I'm actually working with React JS so maybe I'm wrong but atleast give this thing a try!