Pattern Fills for Graphs

Using a fill pattern instead of colour with HighCharts

There seems to be a pattern fill plugin.

How to map variable values to pattern fills - ggplot / ggpattern (

When you set things outside of aes it is like setting them outside of the legend.

If there is something, like angle or pattern that you're willing to lose control of you can get this into a legend. For example:

ggplot(unique(films2[,c("film","word.len.avg")], aes(film, word.len.avg,)) + 
  geom_col_pattern(aes(pattern = film, fill = film, 
                       pattern_angle = film, pattern_spacing = film),
                   fill            = 'white',
                   colour          = 'black',
                   pattern_density = .35,
                   pattern_fill    = 'darkblue',
                   pattern_colour  = 'darkblue') +
  theme_bw() +
  theme(legend.position = "right") + 
  coord_fixed(ratio = 1.5)+
  scale_pattern_spacing_discrete(range = c(0.01, 0.05))

Sample Image

You may have noticed that I used geom_col_pattern().

I saw that you have aes(pattern = film) this line is not doing anything, it needs to be tied to a geom_ or stat_ call.

If you are set on how your variables are presented, you can use
scale_color_manual and scale_fill_manual calls to do this.

For example:

ggplot(unique(films2[,c("film","word.len.avg")], aes(film, word.len.avg,, fill = film))+
  geom_bar_pattern(stat="identity", 
                   pattern = c("circle", "stripe", "none",
                               "wave", "crosshatch" ),
                   pattern_angle = c(45, 60, rep(45, 3)),
                   # fill            = 'white',
                   colour          = 'black', 
                   pattern_density = .35, 
                   pattern_fill    = 'darkblue',
                   pattern_colour  = 'darkblue'
                   
  ) + scale_fill_manual(values = setNames(c("darkred", "darkblue", "white", 
                                                    "lightyellow", "gray"),
                                                  unlist(df$film))) +
  scale_x_discrete(breaks = c("dial.m.for.murder", "pscyho", 
                              "rear.window", "rope", "vertigo"), 
                   labels = c("Dial M for Murder", "Psycho", "
                              Rear Window", "Rope", "Vertigo"))+
  theme_bw() +
  # aes(pattern = film)+
  theme(legend.position = "right") + scale_pattern_fill_viridis_c() +
  coord_fixed(ratio = 1.5)+
  scale_pattern_spacing_discrete(range = c(0.01, 0.05))

Sample Image

How to apply a pattern for a D3 bar chart?

This block by John Schulz successfully makes patterned bar charts that look fantastic (https://bl.ocks.org/jfsiii/7772281).

Copied the code in the below snippet for convenience and perpetuity (also added a little animation to show that it transitions well also).

var first = true;

setInterval( function(){

  

  if(first){

    d3.select('.thing-2').transition()

      .delay(500)

      .duration(1000)

      .attr('height',20)

      .attr('y',80)

  }else{

    d3.select('.thing-2').transition()

      .delay(500)

      .duration(1000)

      .attr('height',100)

      .attr('y',0)

  }

  

  first = !first;

  },2500)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8 />

    <title>SVG colored patterns via mask</title>

    <style>

      /* FF seems to need explicit dimensions */

      svg {

        width: 500px;

        height: 500px;

      }

      rect.hbar {

        mask: url(#mask-stripe)

      }

      .thing-1 {

        fill: blue;

      }

      .thing-2 {

        fill: green;

      }

    </style>

  </head>

  <body>

    <svg>

      <defs>

        <pattern id="pattern-stripe" 

          width="4" height="4" 

          patternUnits="userSpaceOnUse"

          patternTransform="rotate(45)">

          <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>

        </pattern>

        <mask id="mask-stripe">

          <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />

        </mask>      

      </defs>

      <!-- bar chart -->

      <rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect>

      <rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect>

      <rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect>

      

      <!-- horizontal bar chart -->

      <rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect>

      <rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect>

      <rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect>

      

    </svg>

  </body>

</html>

HighCharts Pattern Fill striped

if I understood correctly you need change picture on columns with diagonal stripe

this js fiddle demo from official page but I change column settings:

 color: {
            pattern: 'http://images2.layoutsparks.com/1/192908/black-white-diagonal-stripes.jpg',
            width: 24,
            height: 24,
  ****
}

what this jsfiddle

Pattern Fills for Graphs

Using a fill pattern instead of colour with HighCharts

How to map variable values to pattern fills - ggplot / ggpattern (

How to apply a pattern for a D3 bar chart?

HighCharts Pattern Fill striped

Related Topics

Leave a reply