{"id":987,"date":"2024-04-16T07:30:12","date_gmt":"2024-04-16T11:30:12","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=987"},"modified":"2026-01-30T11:51:37","modified_gmt":"2026-01-30T16:51:37","slug":"introducing-transparency-to-legends-and-rectangles","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/04\/16\/introducing-transparency-to-legends-and-rectangles\/","title":{"rendered":"Introducing Transparency to Legends and Rectangles"},"content":{"rendered":"\n\n\n
\"\"<\/td>\nGuest Writer: Afiq Azaibi<\/a>
\n<\/strong><\/p>\n
\n
\n
Today's R2024a feature highlight is written by Afiq Azaibi<\/a>, a developer on the Charting Team and a returning contributor to the Graphics and App Building blog. See Afiq's bio on our contributors page<\/a>.<\/div>\n<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n
\n

\"Open<\/a><\/p>\n<\/div>\n

Sometimes a legend or rectangle can occlude data behind it. You can make both objects fully transparent by setting the legend's Box<\/span> property to 'off'<\/span> or setting the rectangle's FaceColor<\/span> property to 'none'<\/span> respectively but this could be undesirable in some situations. Starting in R2024a, we introduced features to control the transparency of both legends and rectangles. Let's take a look at an example using weather data around the MathWorks HQ located in Natick, MA from ncei.noaa.gov<\/a> (download link<\/a>).<\/div>\n
\n
\n
load natickWeatherTbl.mat<\/span><\/div>\n<\/div>\n
\n
head(natickWeatherTbl)<\/div>\n<\/div>\n
\"\"<\/div>\n<\/div>\n
<\/div>\n
\n
\n
s = scatter(natickWeatherTbl,\"Date\"<\/span>, [\"Min Daily Temperature\" \"Max Daily Temperature\" <\/span>],'filled'<\/span>, 'MarkerFaceAlpha'<\/span>,.2);<\/div>\n<\/div>\n
\n
axis tight<\/span>;<\/div>\n<\/div>\n
\n
leg = legend;<\/div>\n<\/div>\n
\n
title(\"Daily Temperature in Natick\"<\/span>);<\/div>\n<\/div>\n
\n
ylabel(\"Degrees (F)\"<\/span>);<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
The legend is obscuring part of the scatter charts. Starting in R2024a, we can update the BackgroundAlpha<\/span> property which makes the legend semi-transparent. Now we can see data points behind the legend. If you find yourself in a situation where you can't set the legend's location to be outside and all the locations inside would obscure data, consider leveraging the legend's BackgroundAlpha<\/span> property.<\/div>\n
\n
\n
leg.BackgroundAlpha = .6;<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Additionally, if we wanted to highlight the most number of days below 0 during the winter of 2011, we could add a rectangle<\/a> in this region. The filled rectangle unfortunately obscures the data.<\/div>\n
\n
\n
x = days(natickWeatherTbl.Date(335)-natickWeatherTbl.Date(1));<\/div>\n<\/div>\n
\n
rect = rectangle('Position'<\/span>,[x,-5.5,100,10], 'EdgeColor'<\/span>, 'none'<\/span>, 'FaceColor'<\/span>, 'c'<\/span>);<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Starting in R2024a, rectangle has a FaceAlpha<\/span> property which can be used to change the rectangle's transparency.<\/div>\n
\n
\n
rect.FaceAlpha = .4;<\/div>\n<\/div>\n
\n
\n
\n

<\/p>\n

<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Previously the only workaround for this would be to update the child order of the axes such that the scatter markers render on top of the rectangle. Now that rectangle has FaceAlpha<\/span>, you can choose between the two options depending on whether you want the rectangle to overlay the data or not.<\/div>\n

Read more about the R2024a graphics and app building features<\/a>.<\/p>\n<\/div>\n