Highchart custom label doesn't seem to work with data:image/png;base64

Viewed 264

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

1 Answers
Related