highcharts how to hide out of the box legend symbol when customized legend is used + 1 more question

Question

we wanted to create our own legend based on categorization of dimensions we are displaying + some other condition for specific data points (this is just to give you an idea why we want to change the legend but that part isnt in my sample code).
focusing on just the legend, we are using the legend formatter.
1st question: how do we hide the symbol for each series (we used symbolwidth=0 as suggested in other posts but to no avail) 2nd question: it appears the legend formatter is run for each series, we obviously dont want the legend repeated - how do we show the legend only once

this is my code: https://jsfiddle.net/koh_edwin/evu5np2c/14/

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region',
        align: 'left'
    },
    subtitle: {
        text: 'Source: <a ' +
            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
            'target="_blank">Wikipedia.org</a>',
        align: 'left'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe'],
        title: {
            text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        gridLineWidth: 0
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            borderRadius: '50%',
            dataLabels: {
                enabled: true
            },
            groupPadding: 0.1
        }
    },
    legend: {
        useHTML: true,
            enabled:true,
            symbolWidth: 0,
        labelFormatter: function () {
              var innerText='<p>';
        var theLegend=[{Color:'#F0F0F0', Label: 'legend1'},{Color:'#FFF000', Label: 'legend2'}];
                theLegend.forEach((item, index)=>{
                        innerText += `<span style="font-size:22px; color:${item.Color};">■</span><span style="font-size:14px; color:gray;">${item.Label}</span>` ;
                })
                return innerText;
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1990',
        data: [631, 727, 3202, 721]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 726]
    }, {
        name: 'Year 2018',
        data: [1276, 1007, 4561, 746]
    }]
});

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Bar chart showing horizontal columns. This chart type is often
        beneficial for smaller screens, as the user can scroll through the data
        vertically, and axis labels are easy to read.
    </p>
</figure>

thanks edwin

here is a screenshot - the symbols show even when we have our own legend

Answer 1

Set symbolHeight to 0 as well to remove the symbol.

Regarding the legend, to prevent it from being repeated in each series in your configuration, you can use a flag to control its rendering.

  legend: {
    useHTML: true,
    enabled: true,
    margin: 0,
    padding: 0,
    symbolWidth: 0,
    symbolHeight: 0,
    labelFormatter: function() {
      if (!legendDisplayed) {
        legendDisplayed = true;
        var innerText = '<p>';
        var theLegend = [{
          Color: '#F0F0F0',
          Label: 'legend1'
        }, {
          Color: '#FFF000',
          Label: 'legend2'
        }];
        theLegend.forEach((item, index) => {
          innerText += `<span style="font-size:22px; color:${item.Color};">■</span><span style="font-size:14px; color:gray;">${item.Label}</span>`;
        });
        return innerText;
      }
      return '';
    }
  },

Demo: https://jsfiddle.net/BlackLabel/93vdqsyr/