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.