HighChart - How to change the icons of the highcha

问题:

I want to change the icons/bullets of the highchart legend, Is it possible to customize this?

Thanks for your help.

http://jsfiddle.net/9oz9h3pb/1/

//An example of a graphic from the HighCharts page:
//http://jsfiddle.net/9oz9h3pb/1/

回答1:

You can hide legend markers using CSS:

.highcharts-legend-item .highcharts-point,
.highcharts-legend-item .highcharts-graph {
  display: none
}

Then set useHTML in legend and insert your own HTML using labelFormatter:

  legend: {
    useHTML: true,
    labelFormatter: function() {
      return "<img src='https://pbs.twimg.com/profile_images/538262176134221824/Vx4_Psj1_400x400.png' width='20' height='20'> " + this.name
    }
  }

To make the legend look better move all items a little bit to the left:

this.legend.allItems.forEach(function(item) {
  item.legendItem.attr({
    x: item.legendItem.x - 10
  });
});

Live demo: http://jsfiddle.net/kkulig/k6k9L31k/

API references:

http://api.highcharts.com/highcharts/legend.useHTML http://api.highcharts.com/highcharts/legend.labelFormatter

回答2:

you chan do it using symbolRadius to make it square

legend: {
        symbolRadius: 0
    },

Fiddle

Note If you more customization ie want image then check this Highcarts custom legend and Change size of legend symbol

回答3:

Hope you can read more about highchart API and researching more before create the question next time.

This is document

http://api.highcharts.com/highcharts/legend.useHTML

===This is solution===

Simple way: change the maker type

http://jsfiddle.net/anchika/gb32bx2j/1/

Use the HTML

https://codepen.io/kevintcoughlin/pen/WrKLMe

http://jsfiddle.net/raskalbass/49pre/

Code jsfiddle

回答4:

This, better?

labelFormatter() {
      const hTmp = '<div style="background-color: ' + this.color + 
      ';height:10px;width:10px;display:inline-block;border-radius:50%;"></div>';
      this.legendItem.x = 0;
      return hTmp + '<div style="display: inline-block;padding-left: 10px;">' + this.name + '</div>';
  },