How to custom legend highchart map visualization like this

Question

I need to make the legend like this but not sure how to custom the text, and type of legend into dots

But this is my current result

Current configuration:

colors: ["#B7B7B7", "#861086"],
legend: {
  enabled: true,
  title: {
     text: "Legend",
  },
  align: "left",
  verticalAlign: "bottom",
  floating: true,
  layout: "vertical",
  valueDecimals: 0,
  symbolRadius: 0,
  symbolHeight: 50,
},
  series: [
    {
      data: [],
      joinBy: ["iso-a3", "key"],
      name: "Random data",
      dataLabels: {
        enabled: false,
      },
    },
  ],

Thanks for your help!

Answer 1

It is best to do this by creating an additional empty series that will be located under the current one, then you will have two elements in the legend that can be adjusted accordingly.

legend: {
  title: {
    text: 'Legend',
  },
  align: 'left',
  verticalAlign: 'bottom',
  layout: 'vertical',
  floating: true,
  reversed: true
},
series: [{
  name: 'NOT ADOPTED',
  color: 'gray'
}, {
  name: 'ADOPTED',
  color: 'purple',
  data: [{
    'hc-key': 'br',
  }, {
    'hc-key': 'us',
  }, {
    'hc-key': 'in',
  }],
  keys: ['hc-key', ],
}]

Demo: https://jsfiddle.net/BlackLabel/ujzwsn54/