Custom Legend Development

[AakashMarasini]

Hi Developers!

I have written the code for developing a legend for my custom visual. There are many legend items  which overflow the chartArea and some are invisible.
How can i add horizontal scrolling or buttons like other power bi visual?
Can any one help me on this?

const fontsSize=this.visualSettings.legendFormat.fontSizeLegend.value + "px";
const fontFamily=this.visualSettings.legendFormat.fontFamilyLegend.value;
const fontColor=this.visualSettings.legendFormat.colorLegend.value.value;
const title=datas.categorical.categories[2].source.displayName
createLegend(adjustedChartWidth,title,fontColor,fontFamily,fontsSize,colorScale,this.svg,chartHeight)


function createLegend(adjustedChartWidth: any, title: any, fontColor: any, fontFamily: string, fontsSize: any, colorScale: d3.ScaleOrdinal<string, string>, container: d3.Selection<SVGGraphicsElement, any, any, any>, chartHeight: number) {
  container.select(".legend-scrollable").remove();

  const legendData = colorScale.domain();



  const legendGroup = container
  .append("g")
  .attr("class", "legend-scrollable")
  

  const legendItems = legendGroup
    .selectAll(".legend-item")
    .data(legendData)
    .enter()
    .append("g")
    .attr("class", "legend-item")
    .attr("transform", (_d, i) => `translate(0, ${i * 25})`)

  const circleRadius = 7;

  legendItems.append("circle")
    .attr("r", circleRadius - 1)
    .attr("cx", circleRadius)
    .attr("cy", circleRadius)
    .attr("fill", colorScale);

  legendItems.append("text")
    .attr("x", circleRadius * 2 + 10)
    .attr("y", circleRadius + 2)
    .attr("dy", "0.08em")
    .style("font-size", fontsSize)
    .style("font-family", fontFamily)
    .style("fill", fontColor)
    .style('text-anchor', "start")
    
    .text((d) => {
      const availableWidth = Visual.margins.right - adjustedChartWidth + 850; // Adjust as needed

      const tempText = d3.select('body')
        .append('svg')
        .append('text')
        .style('font-size', fontsSize)
        .style('font-family', fontFamily)
        .style('visibility', 'hidden')
        .text(d);

      const textWidth = tempText.node().getBBox().width + 5;
      tempText.remove();

      if (textWidth > availableWidth) {
        const avgCharWidth = textWidth / d.length;
        const maxChars = Math.floor(availableWidth / avgCharWidth);
        return d.substring(0, maxChars - 4) + '...';
      }

      return d;
    })
    .append('title')
    .text(function (d: string) {
      return d;
    });
    

   

    
  //for positioning of the legend container after the last x axis label
    const lastXTick = xScale.range()[xScale.range().length - 1] + Visual.margins.left + 70;
    const legendX = lastXTick + chartWidth - adjustedChartWidth - 80;
    legendGroup.attr("transform", `translate(${legendX}, 0)`);
}

Thank You !