Fill color inside stair.

Hi all, I has two figures are plotted together. I want to fille colors within stairs but don't know how to do.

figure;
h1 = histogram(data1, 'BinWidth', 0.1,'DisplayStyle','stairs','Normalization', 'probability');
h1.EdgeColor = 'k';  
h1.LineWidth = 2;  
% h1.FaceAlpha = 0.2; 

hold on;  
h2 = histogram(data2, 'BinWidth', 0.1,'DisplayStyle','stairs','Normalization', 'probability');
h2.EdgeColor = [0.772, 0.012, 0.314];  
h2.LineWidth = 2;  
% h2.FaceAlpha = 0.2;  %

xlim([0 2]);  
xticks(0:0.1:2);  

% Customize font and frame properties
ax = gca;  
ax.FontSize = 16;  
ax.FontWeight = 'bold';  
ax.LineWidth = 4;  

Answer 1

[Star Strider]

The stairs plots are relatively straightforward to work with, however it is necessary to get their outputs in order to plot them correctly with the patch function. This approach gets the information from the histogram plots and then uses them with the stairs function to get the information necessary to plot them correctly with the patch function.

Try this —

data1 = randn(1E+3,1)*0.25+1.2;                                                         % Create Data
data2 = randn(1E+3,1)*0.2+1;                                                            % Create Data

figure;
h1 = histogram(data1, 'BinWidth', 0.1,'DisplayStyle','stairs','Normalization', 'probability');
h1.EdgeColor = 'k';  
h1.LineWidth = 2;  
hold on
h2 = histogram(data2, 'BinWidth', 0.1,'DisplayStyle','stairs','Normalization', 'probability');
h2.EdgeColor = [0.772, 0.012, 0.314];  
h2.LineWidth = 2;  

xv1 = h1.BinEdges;                                                                      % First 'histogram' Independent Variable Vector
yv1 = h1.Values;                                                                        % 'histogram' Dependent Variable Vector
[sx1,sy1] = stairs(xv1(1:end-1), yv1);                                                  % Re-Create The 'stairs' (x,y) Values
patch([sx1; flip(sx1)], [zeros(size(sy1)); flip(sy1)], 'k', 'FaceAlpha',0.2)            % Use Them To Plot The Appropriate 'patch' Object

xv2 = h2.BinEdges;                                                                      % Do The Same With The Second 'histogram'
yv2 = h2.Values;
[sx2,sy2] = stairs(xv2(1:end-1), yv2);
patch([sx2; flip(sx2)], [zeros(size(sy2)); flip(sy2)], h2.EdgeColor, 'FaceAlpha',0.2)
hold off

xlim([0 2]);  
xticks(0:0.1:2);  

ax = gca;  
ax.FontSize = 16;  
ax.FontWeight = 'bold';  
ax.LineWidth = 4;  

It would help to have ‘data1’ and ‘data2’ however this should work with them, regardless.

.

[DGM]

The addressing of the xv,yv vectors in the stair generation was dropping the last bin. Also, I moved the patches to the background so that they don't mute the heavy histogram lines.

data1 = randn(1E+3,1)*0.25+1.2;                                                         % Create Data
data2 = randn(1E+3,1)*0.2+1;  % Create Data

figure;
h1 = histogram(data1, 'BinWidth', 0.1,'DisplayStyle','stairs','Normalization', 'probability');
h1.EdgeColor = 'k';  
h1.LineWidth = 2;  
hold on

h2 = histogram(data2, 'BinWidth', 0.1,'DisplayStyle','stairs','Normalization', 'probability');
h2.EdgeColor = [0.772, 0.012, 0.314];  
h2.LineWidth = 2;  

xv1 = h1.BinEdges;                                                                      % First 'histogram' Independent Variable Vector
yv1 = h1.Values;                                                                        % 'histogram' Dependent Variable Vector
[sx1,sy1] = stairs(xv1(1:end), yv1([1:end end]));                                                  % Re-Create The 'stairs' (x,y) Values
hp1 = patch([sx1; flip(sx1)], [zeros(size(sy1)); flip(sy1)], 'k', 'FaceAlpha',0.2);            % Use Them To Plot The Appropriate 'patch' Object
uistack(hp1,'bottom')

xv2 = h2.BinEdges;                                                                      % Do The Same With The Second 'histogram'
yv2 = h2.Values;
[sx2,sy2] = stairs(xv2(1:end), yv2([1:end end]));
hp2 = patch([sx2; flip(sx2)], [zeros(size(sy2)); flip(sy2)], h2.EdgeColor, 'FaceAlpha',0.2);
uistack(hp2,'bottom')
hold off

xlim([0 2]);  
xticks(0:0.1:2);  

ax = gca;  
ax.FontSize = 16;  
ax.FontWeight = 'bold';  
ax.LineWidth = 4;  

[Star Strider]

@DGM — Thank you!

I didn’t see that it was dropping the last bin. (Six hours ago was 04:30 my time. I was not fully awake.) Shifting the layers also improved the result.

[Umar]

Hi @Star Strider,

You should probably try Starbucks or black coffee from speedway 🤓

[Yang Hu]

Thank you all@Umar@DGM! The code is amazing

[Star Strider]

As always, my pleasure!

Note that DGM improvied on my original code.

[Umar]

Hi @Star Strider,

Yes, I see that. In my opinion, it is team effort all together to help out each other. When I miss something in my code, I do need coffee ☕ myself. However, this was a great team effort to help out @Yang Hu and he is happy 😃

[Star Strider]

@Umar — Please stop.

[Umar]

Hi @Yang Hu, Thank you for your kind words regarding the code. I truly appreciate your feedback and am glad to hear that you found it amazing. If you have any further questions or require additional assistance, please do not hesitate to reach out. I am here to help.

Answer 2

[Umar]

Hi @Yang Hu,

You have already created the histograms using the histogram function. This part of your code is correct and will generate the stair plots. To fill the area under the stairs, you need to extract the x and y data from the histogram objects. The Values property of the histogram will give you the heights of the bars, and the BinEdges property will provide the x-coordinates. Then use the fill function to create filled areas under the stair plots. This function will require the x-coordinates and y-coordinates of the vertices of the polygon you want to fill. Let me illustrate by implementing these steps in code below. For more information on this function, please refer to

https://www.mathworks.com/help/matlab/ref/fill.html

%  data

data1 = randn(1000, 1); % Replace with your actual data

data2 = randn(1000, 1); % Replace with your actual data

figure;

% Create the first histogram

h1 = histogram(data1, 'BinWidth', 0.1, 'DisplayStyle', 'stairs', 'Normalization', 

'probability');

h1.EdgeColor = 'k';  

h1.LineWidth = 2;  

% Hold on to plot the second histogram

hold on;  

% Create the second histogram

h2 = histogram(data2, 'BinWidth', 0.1, 'DisplayStyle', 'stairs', 'Normalization', 

'probability');

h2.EdgeColor = [0.772, 0.012, 0.314];  

h2.LineWidth = 2;  

% Set x-axis limits and ticks

xlim([0 2]);  

xticks(0:0.1:2);  

% Customize font and frame properties

ax = gca;  

ax.FontSize = 16;  

ax.FontWeight = 'bold';  

ax.LineWidth = 4;  

% Fill the area under the first histogram

x1 = [h1.BinEdges, h1.BinEdges(end)]; % X-coordinates

y1 = [0, h1.Values, 0]; % Y-coordinates

fill(x1, y1, 'k', 'FaceAlpha', 0.2, 'EdgeColor', 'none'); % Fill with black color

% Fill the area under the second histogram

x2 = [h2.BinEdges, h2.BinEdges(end)]; % X-coordinates

y2 = [0, h2.Values, 0]; % Y-coordinates

% Fill with specified color

fill(x2, y2, [0.772, 0.012, 0.314], 'FaceAlpha', 0.2, 'EdgeColor', 'none'); 

hold off; % Release the hold on the current figure

Please see attached.

Note: Replace data1 and data2 with your actual datasets. Hope this helps.

If you have any further questions or need additional assistance, feel free to ask!