67554

HighChart - How to change the icons of the highchart legend?

Question:

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

Thanks for your help.

<a href="http://jsfiddle.net/9oz9h3pb/1/" rel="nofollow">http://jsfiddle.net/9oz9h3pb/1/</a>

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

Answer1:

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 }); });

<strong>Live demo:</strong> <a href="http://jsfiddle.net/kkulig/k6k9L31k/" rel="nofollow">http://jsfiddle.net/kkulig/k6k9L31k/</a>

<strong>API references:</strong>

<a href="http://api.highcharts.com/highcharts/legend.useHTML" rel="nofollow">http://api.highcharts.com/highcharts/legend.useHTML</a> <a href="http://api.highcharts.com/highcharts/legend.labelFormatter" rel="nofollow">http://api.highcharts.com/highcharts/legend.labelFormatter</a>

Answer2:

you chan do it using <a href="http://api.highcharts.com/highstock/legend.symbolRadius" rel="nofollow">symbolRadius</a> to make it square

legend: { symbolRadius: 0 },

<a href="http://jsfiddle.net/wafq2m17/" rel="nofollow">Fiddle</a>

Note If you more customization ie want image then check this <a href="https://stackoverflow.com/q/45788558/3898339" rel="nofollow">Highcarts custom legend </a> and <a href="https://stackoverflow.com/q/46406947/3898339" rel="nofollow">Change size of legend symbol</a>

Answer3:

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

This is document

<a href="http://api.highcharts.com/highcharts/legend.useHTML" rel="nofollow">http://api.highcharts.com/highcharts/legend.useHTML</a>

===This is solution===

Simple way: change the maker type

<a href="http://jsfiddle.net/anchika/gb32bx2j/1/" rel="nofollow">http://jsfiddle.net/anchika/gb32bx2j/1/</a>

Use the HTML

<a href="https://codepen.io/kevintcoughlin/pen/WrKLMe" rel="nofollow">https://codepen.io/kevintcoughlin/pen/WrKLMe</a>

<a href="http://jsfiddle.net/raskalbass/49pre/" rel="nofollow">http://jsfiddle.net/raskalbass/49pre/</a>

Code jsfiddle

Recommend

  • how to return temp table from postgres function?
  • cordova cant access external scripts, files, images
  • Access nested elements with CSS [closed]
  • How to create a single series bar graph with Highcharts
  • Converting a very large JSON file to CSV
  • Python PIL to extract number from image
  • Outputting SharePoint Hyperlink Column as URL
  • Uncaught TypeError: $(…).select2 is not a function
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • Display images in Django
  • PHP - How to update data to MySQL when click a radio button
  • RectangularRangeIndicator format like triangular using dojo
  • Resize panoramic image to fixed size
  • Cross-Platform Protobuf Serialization
  • Join two tables and save into third-sql
  • How to handle AllServersUnavailable Exception
  • Importing jscolor library in angular 2
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How to get icons for entities from eclipse?
  • Revoking OAuth Access Token Results in 404 Not Found
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • Django query for large number of relationships
  • Running Map reduces the dimensions of the matrices
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?