{"id":1967,"date":"2024-10-16T09:39:07","date_gmt":"2024-10-16T13:39:07","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=1967"},"modified":"2026-01-30T11:59:25","modified_gmt":"2026-01-30T16:59:25","slug":"narrow-down-your-legends-with-iconcolumnwidth","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/10\/16\/narrow-down-your-legends-with-iconcolumnwidth\/","title":{"rendered":"Narrow down your legends with IconColumnWidth"},"content":{"rendered":"\r\n\r\n\r\n
\"\"<\/td>\r\nGuest Writer: Afiq Azaibi<\/a>\r\n<\/strong>\r\n
\r\n
\r\n
Afiq Azaibi<\/a> is back to tell us about a new feature in R2024b that controls the width of a legend. In this article, you'll learn about the new IconColumnWidth<\/span> legend property. Hearing directly from the developers of MATLAB graphics and app features is what this blog is all about! See Afiq's bio on our contributors page<\/a>.<\/div>\r\n<\/div>\r\n<\/div><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
\r\n
\r\n\r\n
\r\n\r\n<\/div>\r\n
\r\n\r\n\r\n\"Open<\/a>\r\n\r\n\r\n<\/div>\r\n
Legend and I were on a diet for 24b. While in the office, I was busy developing a way for users to make the legend narrower. While outside the office, I was busy trying to make myself narrower for my wedding. Let's take a look at how those two projects intersected.<\/div>\r\n
\r\n
\r\n
datasource = \"https:\/\/raw.githubusercontent.com\/MATLAB-Graphics-and-App-Building\/matlab-gaab-blog-2024\/refs\/heads\/main\/IconColumnWidth\/weight.csv\"<\/span>;<\/div>\r\n
tbl = readtable(datasource);<\/div>\r\n<\/div>\r\n
\r\n
tbl = renamevars(tbl, [\"Var1\" \"Var2\"<\/span>], [\"Date\"<\/span>, \"Weight\"<\/span>]);<\/div>\r\n<\/div>\r\n
\r\n
ax = axes;<\/div>\r\n<\/div>\r\n
\r\n
scatter(ax, tbl, 'Date'<\/span>, 'Weight'<\/span>, 'DisplayName'<\/span>, 'My Weight'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
ax.YLabel.String = \"Weight in Pounds\"<\/span>;<\/div>\r\n<\/div>\r\n
\r\n
l = legend;<\/div>\r\n<\/div>\r\n<\/div>\r\n
\"\"<\/div>\r\n
Each point in the scatter denotes a day that I weighed myself. The legend automatically clamps to a smaller size when there are only marker icons. You can see that there's a gap of time I didn't have access to a scale for 2 weeks. Let's highlight that gap of time with a ConstantRegion<\/span><\/a> and while we're at it, also mark the wedding day with a ConstantLine<\/span><\/a>.<\/div>\r\n
\r\n
\r\n
bachelorStart = datetime('21-June-2024'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
bachelorEnd = datetime('6-July-2024'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
bachelorParty = xregion(bachelorStart, bachelorEnd, 'DisplayName'<\/span>, 'Bachelor Party'<\/span>);<\/div>\r\n<\/div>\r\n
\r\n
weddingDay = xline(datetime('10-August-2024'<\/span>), 'r'<\/span>, 'DisplayName'<\/span>, 'Wedding Day'<\/span>);<\/div>\r\n<\/div>\r\n<\/div>\r\n
\"\"<\/div>\r\n
If you look at the legend, you'll notice that after we added the ConstantRegion<\/span> and ConstantLine<\/span>, there's a lot of padding surrounding the scatter icon. This happened because the icons in the legend are not exclusively markers. However the padding can be adjusted with the new IconColumnWidth<\/span><\/a> property on legend. This property sets the width of the icon in points. If the legend does not automatically set this property the way you'd like, you can always override it.<\/div>\r\n
\r\n
\r\n
l.IconColumnWidth = 15;<\/div>\r\n<\/div>\r\n<\/div>\r\n
\"\"<\/div>\r\n
To make the ConstantRegion icon square, you can set the IconColumnWidth to the legend's FontSize property<\/div>\r\n
\r\n
\r\n
l.IconColumnWidth = l.FontSize;<\/div>\r\n<\/div>\r\n<\/div>\r\n
\"\"<\/div>\r\n
To recap, we've introduced IconColumnWidth<\/span> and a new behavior for legend in 24b. The new behavior will automatically update the default value of IconColumnWidth<\/span> when all the icons in the legend are markers. We made this decision to keep the heuristic relatively simple. Additionally, we did not want to change the default value in all cases since icons with non-solid lines get clipped such that it can become difficult to tell the difference between a non-solid line and solid line if IconColumnWidth<\/span> is too small.<\/div>\r\n
Do you have a use case you're excited to apply this new feature to? Do you have ideas on how to improve its functionality? Please share them in the comments so we can continuously improve its design.<\/div>\r\n \r\n\r\n<\/div>\r\n