Bar Chart Tootlip & tickFormat with image

[virendra341]

1. I want to show fixed tooltip for bar chart with sums of bar values on top.
2. I want to use image icon on xAxis label.

var   data=  [
            {
                label: 'Pass',
                values: [{ x: 'EC2', y: 10 }, { x: 'VPC', y: 4 }, { x: 'S3', y: 4 }]
            },
            {
                label: 'Fail',
                values: [{ x: 'EC2', y: 6 }, { x: 'VPC', y: 8 }, { x: 'S3', y: 4 }]
            }
        ]

 var tooltip = function (x, y0, y, total) {
            return y + y0
        };

     const scale = d3.scale.ordinal().range(['#19c681', '#ec4e4e']);

 <BarChart
                        className="barchart"
                        data={data}
                        width={500}
                        colorScale={scale}
                        height={350}
                        tooltipHtml={tooltip}
                        tooltipMode={'element'}
                        margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
                        xAxis={{ interpolate: 'basis-closed', tickDirection: 'diagonal', tickFormat: function (d) { 
                                      return d } }}
                    />

I want to add image in xAxis tickformat i.e. tickFormat: function (d) { return (

<img src={'/assets/service-icon/' + d + '.png'} onError={(e) => { e.target.src = "/assets/service-icon/default.png" }} /> d

} But is not working.

I want result as attach image.