https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Custom-Legend-Development/m-p/3484666#M8125 <P>Hi Developers!<BR /><BR />I have written the code for developing a legend for my custom visual. There are many legend items&nbsp; which overflow the chartArea and some are invisible.<BR />How can i add horizontal scrolling or buttons like other power bi visual?<BR />Can any one help me on this?</P><P>&nbsp;</P><LI-CODE lang="markup">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&lt;string, string&gt;, container: d3.Selection&lt;SVGGraphicsElement, any, any, any&gt;, 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) =&gt; `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) =&gt; { 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 &gt; 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)`); }</LI-CODE><P>&nbsp;</P><P><BR />Thank You !<BR /><BR /></P> Thu, 19 Oct 2023 05:49:09 GMT AakashMarasini 2023-10-19T05:49:09Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Custom-Legend-Development/m-p/3484666#M8125 <P>Hi Developers!<BR /><BR />I have written the code for developing a legend for my custom visual. There are many legend items&nbsp; which overflow the chartArea and some are invisible.<BR />How can i add horizontal scrolling or buttons like other power bi visual?<BR />Can any one help me on this?</P><P>&nbsp;</P><LI-CODE lang="markup">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&lt;string, string&gt;, container: d3.Selection&lt;SVGGraphicsElement, any, any, any&gt;, 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) =&gt; `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) =&gt; { 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 &gt; 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)`); }</LI-CODE><P>&nbsp;</P><P><BR />Thank You !<BR /><BR /></P> Thu, 19 Oct 2023 05:49:09 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Custom-Legend-Development/m-p/3484666#M8125 AakashMarasini 2023-10-19T05:49:09Z