Repository navigation
Bar Chart Tootlip & tickFormat with image #166
Description
- I want to show fixed tooltip for bar chart with sums of bar values on top.
- 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.
Activity