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
- Need to place two stack charts side by side sharing single configuration settings
- Highcharts - svg vs digital
- Highcharts: set regular intervals on xaxis
- Highcharts prevent xAxis Labels hidden
- Integrate Ember-widgets Highchart in Jinja2 template
- Highcharts disable hover effect and select animation
- How to change the border of the area chart?
- How do I calculate the sum of the points in a HighChart after I edit it
- Wrong labels on X axis on Highcharts
- Highchart inner donut name as header for outer donut tooltip
- Indicator above bar in graph
- Include export csv in highcharter
- Highcharts styling, Legend & custom fonts
- Highcharts add tooltip that has a small arrow pointing toward the series
- need help to optimize php iteration
- Highchart Bubble Chart Shadow
- React / High chart / Stacked bar label for each block
- Moving highchart to the left when there is a Y-axis title
- Highcharts will not render if element in series data is empty
- highcharts donut pie - different color for the data than its drilldown
- Setting custom value as label in bar highchart (Rshiny)
- Highchart with background should be Dots instead of Grid
- share colors between pie and column in highchart
- Is it possible with Chart js or which chart Library can provide this type of chart?
- Highcharts Areaspline - Highlight a column on hover effect
- I want the three circles to overlap. (use highcharts)
- Highcharts drilldown json from php mysql
- HighCharts data defined in a HTML Table using PHP MySQL
- Highmaps: Panning programmatically
- how to create a responsive custom label in highchart