I'm using highcharts library to display pie chart, I'm trying to display image/icon before the text of labels on chart. I tried to add it using ways of display images in svg but it didn't work. because highcharts added my image inside onclick action on label.
format: '<image width="40" height="40" xlink:href="{point.img}" /> <span><defs>'
+'<pattern id="{point.name}" patternUnits="userSpaceOnUse" width="100" height="100">'
+'<image xlink:href="{point.img}" x="0" y="0" width="30" height="30" />'
+'</pattern>'
+'</defs></span> {point.name} <span style="fill:url(#{point.name}); stroke: red; stroke-width:2px;"></span>: {point.percentage:.1f} %'
I tried two ways one with <image/>
tag and another with <defs>
and <pattern>
tags
I want to display images, how can I do that? is it possible ? here is my fiddle
I would use html tags with dataLabels.useHTML
flag set to true, see:
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
useHTML: true,
format: '<img width="40" height="40" src="{point.options.img}" /> <span> {point.name} <span style="fill:url(#{point.name}); stroke: red; stroke-width:2px;"></span>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
Demo: http://jsfiddle.net/jc45j7Ln/2/
Note : Since labels are rendered in HTML, then SVG's tooltip will be rendered under HTML. In that case see this question .
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.