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.
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.