score:9
Accepted answer
check highcharts legend api options.you can further customize with desired css. use proper svg image (background color is taken from chart itself)
legend: {
align: 'right',
verticalalign: 'top',
layout: 'vertical',
x: -50,
y: 120,
symbolpadding: 0,
symbolwidth: 0.1,
symbolheight: 0.1,
symbolradius: 0,
usehtml: true,
symbolwidth: 0,
labelformatter: function() {
if(this.name=="microsoft internet explorer"){
return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_508736.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.tofixed(2) + " " + this.y + '%</span></div>';
}
if(this.name=="chrome"){
return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_159842.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.tofixed(2) + " " + this.y + '%</span></div>';
}
if(this.name=="firefox"){
return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_261106.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.tofixed(2) + " " + this.y + '%</span></div>';
}
},
itemstyle: {
color: '#ffffff',
fontweight: 'bold',
fontsize: '19px'
}
},
fiddle demo
score:2
you can modify legend. to display custom icons in place of legend symbols, you need to set legend.usehtml with true value, hide symbol with:
.highcharts-legend-item rect {
visibility: hidden;
}
and use labelformatter
. take a look at the example posted below.
api reference:
http://api.highcharts.com/highcharts/legend
example:
http://jsfiddle.net/2trc1gv9/
Source: stackoverflow.com
Related Query
- Highcarts custom legend
- Highmap R (or) javascript - adding custom legend
- Symbol-outline with pie chart -or- custom legend symbols
- Highcharts Legend Custom HTML
- Custom Highcharts legend symbol
- Angular Highcharts Custom Legend Label In Area Chart
- Custom legend in rCharts (highcharts)
- Highcharts styling, Legend & custom fonts
- Set custom legend item symbol (or icon) in HIghcharts
- Highcharts legend custom css style / format using only highcharts options
- highcharts - how do I do custom labels on heatmap legend
- Highcharts custom symbol legend
- Pie Chart Custom Legend
- Highcharts Custom SVG Marker Symbol is Shaped Different in Legend
- Highcharts type flags with custom legend icon
- Display custom tooltip on highcharts legend
- HighCharts: Custom button next to legend inside chart area
- Highcharts: legend on bottom with custom marginBottom already
- Strange character in the Highstock source code
- Highcharts custom legend SVG symbol does not fade when you click to turn off series
- How can I control legend items through a custom button in Highcharts?
- Custom colors in Highcharter are not mapping correctly to the legend
- highcharts - custom legend width
- Highcharts : remove custom legend tooltip from export
- Highcarts bar legend symbol alignment to the label
- Is it possible to custom custom, hard-coded legend
- Angular2-Highcharts: Click event on custom legend title
- Highcharts column graph custom legend formatting not showing legend symbols
- Set custom symbol to HighCharts legend
- highcharts - Custom legend - sending the name of the filter to a php file
More Query from same tag
- Chart not exporting to XLS File - Highcharts
- Need legends in high chart to be square shape
- Highcharts Options to stringified JSON
- Dynamically update pointStart and pointInterval
- Highchart export is calling events
- How to align title html div with chart horizontally in highchart?
- How to adjust line-height/ellipses in Highcharts axis labels
- Replace data set every min
- How to display full text in data labels in sunburst highcharts
- HighCharts navigator: how to disable the expand width icon on hover
- Highcharts donut hover all area
- highcharts unresponsibe graphics on Amazon Linux server
- X coordinates of each yAxis in HighStock chart
- Jquery Highcharts Legend items sorting
- Combining drag of jquery to change highcharts Height using CSS
- highcharts marker: {radius: 10} on individual data points makes certain data points disappear?
- Highcharts Weird Vertical Lines
- How to create a HighCharts chart in react
- Highcharts age stacking
- add scatter points on line chart, Highcharts
- Multiple charts with same data not loading in same page: Highcharts
- How to show axis labels in Sparkline charts?
- Highstocks compare stocks how to define data?
- Clickable HTML element that closes Highcharts tooltip
- jquery highcharts multiline mvc asp.net
- Audiogram with Highcharts
- Query regarding why and how to use highcharts license
- Highcharts: Overlapping colors in bar type
- high charts - how do I get a stacked graph to the full width?
- R Highcharter - firePointEvent When Action Button is Clicked