{"id":788,"date":"2024-01-22T10:36:33","date_gmt":"2024-01-22T15:36:33","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=788"},"modified":"2026-01-30T11:47:45","modified_gmt":"2026-01-30T16:47:45","slug":"plotting-with-style-synchronizing-color-and-linestyle-with-seriesindex","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2024\/01\/22\/plotting-with-style-synchronizing-color-and-linestyle-with-seriesindex\/","title":{"rendered":"Plotting with Style: Synchronizing Color and LineStyle with SeriesIndex"},"content":{"rendered":"
\n
\"\"<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
Guest Writer: Eric Ludlam<\/a><\/span><\/div>\n
Joining us again is Eric Ludlam, development manager of MATLAB\u2019s charting team. Discover more about Eric on our contributors bio page<\/span>. <\/a><\/div>\n
\n
\n<\/div>\n
\n

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

MATLAB Graphics supports a lot of color and style customization that can be applied to your charts. While this flexibility is great for making highly customized graphics, it can make for some added work when you want to tweak the aesthetic when you share color relationships across multiple plots. For example, consider this code snippet where you'd like a line and a scatter to have the same color: you either have to pull the color from one object and set it on the next, or you need to specify your own colors on both.<\/div>\n
\n
\n
theta = 0:.1:2*pi;<\/div>\n<\/div>\n
\n
h = plot(theta,sin(theta));<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
hold on<\/span><\/div>\n<\/div>\n
\n
sh2 = scatter(theta,cos(0:.1:2*pi));<\/div>\n<\/div>\n
\n
set(sh2,'MarkerEdgeColor'<\/span>, h.Color); % copy color from the line handle<\/span><\/div>\n<\/div>\n
\n
hold off<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
If you want to change the color from blue to some other color after creating this chart and you hadn't saved any handle outputs, you would now need to use findobj<\/span> to find the handles to your charts, and set the Color<\/span> on the line and MarkerEdgeColor<\/span> on the scatter to your new color.<\/div>\n
If you follow other blogs at the MathWorks, you likely have also heard about a new feature we're working on to support Dark Mode<\/span> in figures<\/a>. It's important that features like Dark Mode don't override manually set colors because in data vizualizations, colors can often have specific meaning. When you use automatically selected colors however, those colors will be updated to look good with dark backgrounds.<\/div>\n
That brings us to our topic today. You can use the \"SeriesIndex<\/span><\/a>\" property to synchronize colors and keep your charts ready for Dark Mode. SeriesIndex<\/span> can be found on most charts and graphics objects. The SeriesIndex<\/span> property can be used to control properties such as Color<\/span>, and for line plots, LineStyle<\/span> as well. Let's dig in!<\/div>\n

Punkin Chunk Data Set<\/h2>\n
The data set I'm going to use today is from the World Championship Punkin Chunk, a contest where my catapult team and I compete with other teams to see who can chunk (launch) a pumpkin the farthest, as measured by a survey team. I gathered these data off the official site which goes back to 2000, and I filled in missing entries for satellite contests based on photographs like this one after I managed to score a trophy for chunkin' a pumpkin over 1000 ft.<\/div>\n
\"EricAndScoreboard.jpg\"<\/div>\n
I've captured the data in a mat file, and the fields I'll be using include the Year, Machine name, and the Distance.<\/div>\n
You can download the mat file like this:<\/div>\n
\n
\n
matfile=\"PunkinChunk2000-2018.mat\"<\/span>;<\/div>\n<\/div>\n
\n
if <\/span>~exist(matfile,'file'<\/span>)<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0url=\"https:\/\/github.com\/MATLAB-Graphics-and-App-Building\/matlab-gaab-blog-2024\/raw\/main\/PunkinChunkSeriesIndex\/\"<\/span>;<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0websave(matfile, url+matfile);<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n<\/div>\n
Load the data file:<\/div>\n
\n
\n
load('PunkinChunk2000-2018.mat'<\/span>, 'ChunkTab'<\/span>)<\/div>\n<\/div>\n
\n
% Display some results from the torsion division<\/span><\/div>\n<\/div>\n
\n
tail(ChunkTab(ChunkTab.Division=='torsion'<\/span>,:))<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\"\"<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\n
My catapult's name is \"Mista Ballista<\/span>\", and my team and I often refer to it as \"Mr. B<\/span>\". It's a re-imagining of an ancient Greek ballista, one of the first large stone throwing devices ever built.<\/div>\n
\"\"<\/a><\/div>\n

Plotting Data with MATLAB's Default Color assignments<\/h2>\n
Here's how to plot out my competition shots as recorded in the table along with a fit line so you can see how we've been trending year-over-year.<\/div>\n
Notice that I'm creating the scatter chart directly from the table. When you specify a table as the first input with names of variables in the table for X (Year) and Y (Distance), you also get some handy X and Y axis labels. This feature was added in R2021b.<\/div>\n
\n
\n
mrb_h = scatter(ChunkTab(ChunkTab.Machine==\"Mista Ballista\"<\/span>,:), ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Year'<\/span>, 'Distance'<\/span>, 'filled'<\/span>, 'DisplayName'<\/span>, \"Mista Ballista\"<\/span>);<\/div>\n<\/div>\n
\n
hold on<\/span><\/div>\n<\/div>\n
\n
[fX, fY] = computeFit(mrb_h); % See helper fcn at end of script<\/span><\/div>\n<\/div>\n
\n
mrb_fit_h = plot(fX, fY, 'LineWidth'<\/span>, 1);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Decorate<\/span><\/div>\n<\/div>\n
\n
title(\"Punkin Chunk: Mista Ballista\"<\/span>)<\/div>\n<\/div>\n
\n
subtitle(\"Competition Measurements\"<\/span>) % Introduced 2020b<\/span><\/div>\n<\/div>\n
\n
set(gca,'TitleHorizontalAlignment'<\/span>,'left'<\/span>); % Introduced R2020b<\/span><\/div>\n<\/div>\n
\n
grid on<\/span><\/div>\n<\/div>\n
\n
box on<\/span><\/div>\n<\/div>\n
\n
xlim padded <\/span>% Introduced R2021a<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
You can see we've been making progress every year up to 2018, after which we haven't been able to compete since there hasn't been a Punkin Chunk within traveling range that I could get to.<\/div>\n
As for this chart, it looks good so far and it is easy to see what's going on. That changes once I add one of my competitors in the torsion division to this chart. As you can see below, there are now 4 colors in the chart, where ideally there should only be 2, one for each machine.<\/div>\n
\n
\n
onager_h = scatter(ChunkTab(ChunkTab.Machine==\"Onager\"<\/span>,:), ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Year'<\/span>, 'Distance'<\/span>, 'filled'<\/span>, 'DisplayName'<\/span>, \"Onager\"<\/span>);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
[fX, fY] = computeFit(onager_h);<\/div>\n<\/div>\n
\n
onager_fit_h = plot(fX, fY, 'LineWidth'<\/span>, 1);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Redecorate<\/span><\/div>\n<\/div>\n
\n
title(\"Punkin Chunk\"<\/span>,\"Competition Measurements\"<\/span>)<\/div>\n<\/div>\n
\n
legend([mrb_h onager_h], 'Location'<\/span>, 'northwest'<\/span>,'AutoUpdate'<\/span>,'off'<\/span>);<\/div>\n<\/div>\n
\n
hold off<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n

How to Set SeriesIndex<\/span><\/h2>\n
Now that we're looking at the results from multiple competitors, we should make the colors for the scatter and fit line match. We can do that by using SeriesIndex<\/span>!<\/div>\n
I saved the handles for Mista Ballista's scatter and fit line, and the handles to Onager as well. We can now synch up their Series Indices and everything will now match in color. You might wonder why we'd use SeriesIndex<\/span> instead of just setting the Color<\/span> property. For starters, the scatter chart uses MarkerEdgeColor<\/span> or MarkerFaceColor<\/span> which is different from the line's Color<\/span> property, so you need to specify each one separately. The second reason is that SeriesIndex<\/span> now tells MATLAB that these graphics objects are related to each other, which will make it easier to change colors and styles together (see below.)<\/div>\n
Here's the code to set the SeriesIndex<\/span>:<\/div>\n
\n
\n
set([mrb_h, mrb_fit_h],'SeriesIndex'<\/span>, 1);<\/div>\n<\/div>\n
\n
set([onager_h, onager_fit_h], 'SeriesIndex'<\/span>, 2);<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
The SeriesIndex<\/span> property was introduced in R2019b and can be any positive integer. It is used to index into both the Axes ColorOrder<\/span><\/a> and LineStyleOrder<\/span><\/a> properties. As of R2023b, more objects now support SeriesIndex<\/span>, including the xline<\/span> and yline<\/span> objects. In addition, SeriesIndex<\/span> now supports a value of 'none<\/span>' which indicates it should use a neutral color (dark gray by default).<\/div>\n
\n
\n
mrb_best = max(ChunkTab.Distance(ChunkTab.Machine==\"Mista Ballista\"<\/span>));<\/div>\n<\/div>\n
\n
mrb_best_h = yline(mrb_best,'-'<\/span>,\"Ballista's Best\"<\/span>,\"LineWidth\"<\/span>, 1, \"Alpha\"<\/span>, 1);<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
mrb_best_h.SeriesIndex<\/div>\n
\n
\n
\n
ans = <\/span>'none'<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Creating Charts in a loop with SeriesIndex<\/span><\/h2>\n
You can also control the SeriesIndex<\/span> of all these graphics objects during creation, and it's easy to do that even if you have an unknown number of data series to stick into one plot. This next block of code will pluck out data for several competitors in the Torsion division and plot them together.<\/div>\n
\n
\n
machines = [ \"Shenanigans\" \"Mista Ballista\" \"Onager\" \"Roman Revenge\" \"Chucky III\"<\/span> ];<\/div>\n<\/div>\n
\n
handles = gobjects(1,numel(machines));<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Place this chart in tiled layout so we can add more axes later<\/span><\/div>\n<\/div>\n
\n
tiledlayout(1,1,'Padding'<\/span>,'compact'<\/span>,'TileSpacing'<\/span>,'compact'<\/span>);<\/div>\n<\/div>\n
\n
ax1=nexttile;<\/div>\n<\/div>\n
\n
hold on<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Loop over each machine<\/span><\/div>\n<\/div>\n
\n
for <\/span>idx=1:numel(machines)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0Machine_dat = ChunkTab(ChunkTab.Machine==machines(idx),:);<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0h = scatter(Machine_dat, 'Year'<\/span>, 'Distance'<\/span>, 'filled'<\/span>, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'SeriesIndex'<\/span>, idx); % Specify during creation<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0[fX, fY] = computeFit(h);<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0handles(idx) = plot(fX, fY, 'LineWidth'<\/span>, 2, ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'DisplayName'<\/span>, machines(idx), ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'SeriesIndex'<\/span>, idx); % Set series index to match.<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Decorate!<\/span><\/div>\n<\/div>\n
\n
title(\"Punkin Chunk: Torsion Division\"<\/span>,\"Competition Measurements\"<\/span>)<\/div>\n<\/div>\n
\n
set(gca,'TitleHorizontalAlignment'<\/span>,'left'<\/span>)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
ylim([0 4000])<\/div>\n<\/div>\n
\n
box on<\/span><\/div>\n<\/div>\n
\n
grid on<\/span><\/div>\n<\/div>\n
\n
xlim padded<\/span><\/div>\n<\/div>\n
\n
legend(handles, 'Location'<\/span>, 'northwest'<\/span>, 'Direction'<\/span>,'reverse'<\/span>); % Direction added in R2023b<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Let's add a little axes on the side to show the longest shots for each machine in the chart. I'll use a fun trick by placing this new axes in the west tile to keep it narrow automatically. Using yline<\/span> makes it easy to create a mini graph with nice labels, and we can set the SeriesIndex<\/span> on them too!<\/div>\n
\n
\n
ax2=nexttile('west'<\/span>); % Add a mini-chart on the side<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
for <\/span>idx=1:numel(machines)<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0best = max(ChunkTab.Distance(ChunkTab.Machine==machines(idx)));<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0yl = yline(best,''<\/span>,best,'Alpha'<\/span>,1,'LineWidth'<\/span>,2,...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'SeriesIndex'<\/span>,idx); % Set Series Index during creation<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0% Re-align some labels to avoid overlap<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0if <\/span>ismember(machines(idx), [\"Onager\" \"Shenanigans\"<\/span>])<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0yl.LabelVerticalAlignment = 'bottom'<\/span>;<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0end<\/span><\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Decorate!<\/span><\/div>\n<\/div>\n
\n
box on<\/span><\/div>\n<\/div>\n
\n
grid on<\/span><\/div>\n<\/div>\n
\n
linkaxes([ax1 ax2], 'y'<\/span>) % Keep Y linked between both axes<\/span><\/div>\n<\/div>\n
\n
xticks([]);<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n
\n
% Remove ticklabels and ylabel from ax1, add to ax2<\/span><\/div>\n<\/div>\n
\n
yticklabels(ax1,[]);<\/div>\n<\/div>\n
\n
ylabel(ax1, ''<\/span>);<\/div>\n<\/div>\n
\n
ylabel(ax2,'Distance'<\/span>);<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
So yea, Mista Ballista isn't as competitive as some of the other machines, but I'm still proud of my 1700ft shot.<\/div>\n
But that's not what we are here for.<\/div>\n

Manipulating Chart Colors and Styles<\/h2>\n
Once all the elements of your chart are matched up using SeriesIndex<\/span>, you can now modify the color of your chart easily. To quickly change the color, you can use the colororder<\/span><\/a> command. Starting in R2023b, there are several new named color orders to choose from to make restyling your chart easy. Notice that when you don't specify an axes handle, this command works on all charts in all axes in the figure. If you frequently create charts with multiple axes, this can be a big time-saver!<\/div>\n
\n
\n
colororder earth<\/span><\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
You can also manipulate the LineStyleOrder<\/span> of the Axes to change the style of all the lines in one go. By default, the LineStyleCyclingMethod<\/span> is 'aftercolor<\/span>', and since we want colors and line styles to cycle together, we also need to change that property to 'withcolor<\/span>'.<\/div>\n
Edit<\/em>: As of R2024a you can also use the linestyleorder<\/a><\/span> function to set the LineStyleOrder<\/span> and LineStyleCyclingMethod.<\/span><\/div>\n
\n
\n
set([ax1 ax2],'LineStyleOrder'<\/span>, [ \"-\" \":\" \"--\" \"-.\"<\/span>], ...<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'LineStyleCyclingMethod'<\/span>, 'withcolor'<\/span>)<\/div>\n<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
So now you see that using SeriesIndex<\/span> can make restyling your chart quick and easy. An additional benefit is that using SeriesIndex<\/span> will also make your charts compatible with upcoming Dark Mode support which will help keep your charts looking good with either dark or light backgrounds.<\/div>\n
\n
\n
function <\/span>[fX, fY] = computeFit(h)<\/div>\n<\/div>\n
\n
% Compute fit for data contained in line or scatter object H<\/span><\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0X = h.XData;<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0Y = h.YData;<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0mask = ~(isnan(Y) | isnan(X));<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0F = polyfit(X(mask), Y(mask), 2);<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0fX = linspace(min(X), max(X));<\/div>\n<\/div>\n
\n
\u00a0\u00a0\u00a0\u00a0fY = polyval(F, fX);<\/div>\n<\/div>\n
\n
end<\/span><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n<\/div>\n