Currently, I am utilizing Vue with Britecharts to create a horizontal bar chart. My goal is to integrate avatar images on the y-axis beside the name label. After conducting some research, I came across helpful resources such as D3 How to place image next to horizontal line text and this which demonstrate the desired outcome using D3.
I am seeking guidance on how to achieve this functionality within Britecharts. Below is a snippet of my code in action.
Codepen: https://codepen.io/cooltaiwanesesam/pen/RwPYpbz
createHorizontalBarChart() {
let barChart = new britecharts.bar(),
margin = {left: 120, right: 20, top: 20, bottom: 30},
barContainer = d3.select('.js-horizontal-bar-chart-container'),
containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false;
barChart
.isHorizontal(true)
.margin(margin)
.width(containerWidth)
.colorSchema(britecharts.colors.colorSchemas.britecharts)
.valueLabel('percentage')
.height(300);
barContainer.datum(this.data.reverse()).call(barChart);
}