Highcharts custom symbol legend

Question

I need to custom the legend symbol for my chart

I use Highcharts.js. I try several solutions without success :

• legend : rect or span are generated in the html as tspan which does not support background color

  legend: { 
    enabled: true,
    align: 'left',
    verticalAlign: 'middle',
    layout: 'vertical',
    useHtml: true,
    symbolHeight: 0,
    symbolWidth: 0,
    labelFormatter: function () {
              if (this.name == 'Epargne') return '<div><rect style="width:100px;display:inline-block;padding:10px 4px 10px 4px;text-align:center;color:#FFF;fill:'+ this.color +'">47.000€</rect><b>EPARGNE</b></div>';
              if (this.name == 'Profil prudent') return 'PRUDENT';
              if (this.name == 'Profil équilibré') return 'EQUILIBRE';
              if (this.name == 'Profil entreprenant') return 'ENTREPRENANT';
              return '??'
        }
  },
  

• series : symbol can't be a text and predefined does not work. I don't want symbols on lines so I disable marker in plotOptions.

  series: [
      {
                data: [],
                  id: 'epargne',
        name: 'Epargne',
                  marker: {
                  symbol: 'triangle'
                  }
              },
          {
      linkedTo: 'epargne',
              name: 'Epargne',
                  data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                  color: '#2f7ed7'
          },
  

• by using renderer : not apply

  Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
      return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
  };
  if (Highcharts.VMLRenderer) {
     Highcharts.VMLRenderer.prototype.symbols.cross =   Highcharts.SVGRenderer.prototype.symbols.cross;
  }
  

here the fiddle : jsfiddle

Is it possible ? How can I achieve this ?

Thanks in advance.

Answer 1

You can achieve the desired result with html usage. In the label formatter make a div container for the text and the box. Set background color to the points color. Space between legend's items can be set with legend.itemMarginBottom/Top.

legend: {
  enabled: true,
  align: 'left',
  verticalAlign: 'top',
  layout: 'vertical',
  useHTML: true,
  symbolHeight: 0,
  symbolWidth: 0,
  itemMarginTop: 4,
  itemMarginBottom: 4,
  labelFormatter: function() {
    return '<div><div style="width:70px;display:inline-block;padding:3px 2px 3px 2px;text-align:center;color:#FFF;background-color:' + this.color + '">47.000€</div>    <b>' + this.name + '</b></div>';
  }
},

example: https://jsfiddle.net/5n7fue7m/