# How to create a patch/shape with a color gradient in a simple 2d plot?

**URL:** <https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607>\
**Category:** Visualization\
**Tags:** question, plotting\
**Created:** [June 9, 2021, 6:15am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607 "2021-06-09T06:15:35Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![philihp](https://avatars.discourse-cdn.com/v4/letter/p/6f9a4e/32.png) [@philihp](https://discourse.julialang.org/u/philihp)\
**Post date:** [June 9, 2021, 6:15am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/1 "2021-06-09T06:15:35Z")

</div>

Hi, I am trying to add a rectangle with a color gradient to a plot to indicate a special region that should fade out, i.e. have a color gradient to white. So far I have tried hpatch() and vpatch(), which give me the rectangle, but only in a solid color. I’ve managed to engineer a color gradient using a heatmap, but this overlays the xticks and yticks and is therefore not a suitable solution. I’ve tried to use fill, and then set the fill\_z accordingly, but this gives me slices that do not interpolate nicely no matter how fine I make the spacing… here is some code to demonstrate what I try to achieve.

```julia
myCG = cgrad([:gray, :white]);
gridSpacing = 50;
xPatch = (1, 10);
yPatch = (0, +1);
x = range(xPatch[1], stop = xPatch[2], length = gridSpacing);
y = yPatch[2] * ones(length(x));
z = range(0, stop = 1, length = gridSpacing);
myPlot = plot(x, y, linecolor = :transparent, fillrange = yPatch[1], fillcolor = myCG, fill_z = z, legend = false)

```

Is there any simple way to do this?

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [June 9, 2021, 6:58am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/2 "2021-06-09T06:58:07Z")

</div>

Have you checked this [post](https://discourse.julialang.org/t/can-i-paint-the-background-of-a-plot/) with a beautiful solution by @klaff using Plots, Colors and PolygonOps?

_NB: please post your code above inside triple backticks_

---

<div class="post-metadata">

**Author:** ![philihp](https://avatars.discourse-cdn.com/v4/letter/p/6f9a4e/32.png) [@philihp](https://discourse.julialang.org/u/philihp)\
**Post date:** [June 9, 2021, 7:24am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/3 "2021-06-09T07:24:07Z")

</div>

Thanks for the suggestion. I came across this post already, but I felt like there has to be a simpler solution. Anyway, I will take a closer look at it again.

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [June 9, 2021, 7:29am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/4 "2021-06-09T07:29:23Z")

</div>

You may not want to switch plotting libraries for this, but in Makie you can use poly or mesh with a color for each point:

```julia
using GLMakie

poly(
    Point2f0[(0, 0), (0, 1), (1, 1), (1, 0)], 
    color = [:gray, :gray, :white, :white])

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/d/d/dd35eafa714a46d276b54493c49a031ce00bcebb.png)

```julia
# Or with transparency to fade out even more:w
poly(
    Point2f0[(0, 0), (0, 1), (1, 1), (1, 0)], 
    color = [:gray, :gray, (:white, 0.0), (:white, 0.0)])

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/2/7/27533630160f42375c6d1f871204836ddd572ab8.png)

---

<div class="post-metadata">

**Author:** ![philihp](https://avatars.discourse-cdn.com/v4/letter/p/6f9a4e/32.png) [@philihp](https://discourse.julialang.org/u/philihp)\
**Post date:** [June 9, 2021, 7:55am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/5 "2021-06-09T07:55:53Z")

</div>

Thanks., this is exactly what I am looking for. I still didn’t manage to do this with GR, but maybe I can combine your suggestion with the rest of the plot.

---

<div class="post-metadata">

**Author:** ![Gravlax](https://avatars.discourse-cdn.com/v4/letter/g/dbc845/32.png) [@Gravlax](https://discourse.julialang.org/u/Gravlax)\
**Post date:** [June 20, 2022, 4:54pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/6 "2022-06-20T16:54:29Z")

</div>

If I may follow up on this, is there a way to make a triangle patch plot with a bilinear gradient (or higher order) with Makie?  
I’m trying to make a a patch plot (multiple triangles or quads) in which all vertices are assigned with a scalar value (not a RGB code) and which the interior value is interpolated from vertices values.  
Using the above and other online examples, here’s an attempt of MWE which only feature one triangle.

```julia
using GLMakie
vertices = [
    0.0 -1.0;
    1.0 0.0;
    0.6 1.0;
    0.0 0.0; # why does the script fails if this vertex is removed? Ideally, one should not need a 4th vertex to draw a triangle
]
faces = [
    1 2 3;
]
f = Figure(backgroundcolor = RGBf(0.98, 0.98, 0.98),
    resolution = (1000, 700))
ga = f[1,1]
ax2d = Axis(ga[1, 1], title = "patch plot")
colors = [1, 2, 3] # EDIT: 4th color is not needed - which makes sense for a triangle
m = mesh!(ax2d,vertices, faces, color = colors, shading = false, colormap = Reverse(:roma))
Colorbar(ga[1, 2], m, label = "whatever")
display(f)

```

This MWE runs but only if the vertices list contains 4 vertices (while only 3 would be needed for a triangle) and when the the list of colors contains 4 values (while 3 values would be needed for a triangle).  
Would anyone have an idea of what’s wrong with the above example?

---

<div class="post-metadata">

**Author:** ![Gravlax](https://avatars.discourse-cdn.com/v4/letter/g/dbc845/32.png) [@Gravlax](https://discourse.julialang.org/u/Gravlax)\
**Post date:** [June 26, 2022, 12:32pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/7 "2022-06-26T12:32:04Z")

</div>

![image](https://global.discourse-cdn.com/julialang/original/3X/8/9/8905f0cdfa1b1b812f858e5cf9cee6cc6711ef0b.jpeg)  
Here’s the output corresponding to the above MWE.  
Besides the issues stated above, one problem is that, along the upper edge, one would explain a gradient from -1.0 to 3.0, but there is no color corresponding to this range along that edge. Would anyone has a hint? Cheers!

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [June 26, 2022, 12:43pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/8 "2022-06-26T12:43:08Z")

</div>

Is this cairomakie or glmakie?

---

<div class="post-metadata">

**Author:** ![Gravlax](https://avatars.discourse-cdn.com/v4/letter/g/dbc845/32.png) [@Gravlax](https://discourse.julialang.org/u/Gravlax)\
**Post date:** [June 26, 2022, 7:09pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/9 "2022-06-26T19:09:02Z")

</div>

So far, I’ve only tried GLMakie. I will try with Cairo.  
Is what I’m trying to do possible to do with Makie (i.e. plotting a triangular patch with a linear gradient based on vertices values) ?  
Cheers and thanks!

EDIT: I’ve CairoMakie and got the same result. Not sure what I do wrong. One puzzling thing is: what is the role of the 4th vertice in the list?

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [June 27, 2022, 2:59pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/10 "2022-06-27T14:59:51Z")

</div>

Ah the good old interpolating between colors vs between values:  
I just fixed it in GLMakie:  
[https://github.com/JuliaPlots/Makie.jl/pull/2097](https://github.com/JuliaPlots/Makie.jl/pull/2097)

The matrix of values approach is a bit flimsy because it’s ambiguous, so I’d just use points:

```julia
using GLMakie
vertices = Point2[
    (0.0, -1.0)
    (1.0, 0.0)
    (0.6, 1.0)
]
faces = [1, 2, 3]
colors = [1, 2, 3]
f, ax, p = mesh(vertices, faces, color = colors, shading = false, colormap = Reverse(:viridis))
Colorbar(f[1, 2], p)
f

```

---

<div class="post-metadata">

**Author:** ![Gravlax](https://avatars.discourse-cdn.com/v4/letter/g/dbc845/32.png) [@Gravlax](https://discourse.julialang.org/u/Gravlax)\
**Post date:** [September 5, 2022, 11:15pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/11 "2022-09-05T23:15:29Z")

</div>

Thanks again for considering my question. I have now updated GLMakie and well as Julia (1.8). Unfortunately I still get the same result. Have the changes you made been pushed to the main branch?  
Also, the MWE now takes a first execution time of 8 min 45 s on my lappy. It looks (and sounds) like it’s an unusually expensive computing task. Is there anything I could try besides making a system image?  
Cheers

---

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [September 7, 2022, 9:50am UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/12 "2022-09-07T09:50:41Z")

</div>

I have to admit, precompile times have been increasing.  
But time to first plot should be a lot faster now, so after you compiled the new version, things should be much faster.  
I get ~5 minute compile times for the very first time installing the package, and then I get 47s time to first plot…

I just tested Makie@0.6.13 and it does interpolate between values and not colors anymore, so I guess you’re still on the wrong version?!

---

<div class="post-metadata">

**Author:** ![Gravlax](https://avatars.discourse-cdn.com/v4/letter/g/dbc845/32.png) [@Gravlax](https://discourse.julialang.org/u/Gravlax)\
**Post date:** [September 7, 2022, 6:52pm UTC](https://discourse.julialang.org/t/how-to-create-a-patch-shape-with-a-color-gradient-in-a-simple-2d-plot/62607/13 "2022-09-07T18:52:23Z")

</div>

Thanks, you’re right, it’s me being confused. I was working in a notebook and somehow `Pkg.update()` never brought me to GLMakie v0.6.13, I’m trying to understand why… In the same project, I’ve run `]up` and just got the right versions. Results look great and time for 1st plot is comparable to what I had initially (2m45 on my lappy):

 ![image](https://global.discourse-cdn.com/julialang/original/3X/c/5/c5f0ae2dc935acb9b7ae627e76536dc6d13396c7.png)  
So, I apologise for my previous message. Now I go to study what’s going in with my package manager…