I would like to use a custom label for the labels but it doesn't seem to render if the source of a image is a data:image/png;base64.
Searching on this online it's mentioned that I should use renderToStaticMarkup and/or encodeURIComponent, but this is also not working.
See code example below :
const graphOptions : Highcharts.Options = {
chart: {
width: 500,
height: 250,
},
title: {
text: ''
},
yAxis: {
min: 0,
title: {
text: 'Votes'
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.y} votes by ',
footerFormat: '{point.key}',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
type: 'column',
name: 'votes',
data: votesData
}],
xAxis: {
categories: addressData,
labels: {
useHTML: true,
formatter: function() {
return renderToStaticMarkup(<span>
{<Avatar
src={makeBlockie("0x1e52C0887bc0F752368dFb80974ec988Ab40AED3")}
size={20}
alt={'0x1e52C0887bc0F752368dFb80974ec988Ab40AED3'}
/> }
</span>)
}
}
}
}
return (
<div>
<HighchartsReact highcharts={Highcharts} options={graphOptions} />
</div>
)
makeBlockie is used for generating blocky identicons as base64 encoded PNGs