Plotly: I want to include some pattern in histogram columns

Language: JavaScript

I want to include some templates in my histogram columns. I don't see anything available in the default plot to serve a purpose.

So I tried to get the "point" element in the dynamically generated "svg" component. Then create a "pattern" element. I thought that after creating the inner template tag, I would be able to set the cusotom attributes.

But it doesn't work at all.

Below is an example of the code used:

var data = [{
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  type: 'bar'
}];

Plotly.newPlot('myDiv',data);

var ticks = document.getElementsByClassName('point');
for (var i = 0; i < ticks.length; i += 1) {
          var patt = document.createElement("pattern");
          patt.setAttribute('patternTransform','rotate(30)');
          patt.setAttribute('patternUnits','userSpaceOnUse');
          patt.setAttribute('fill', 'red');
          ticks[i].appendChild(patt);

}

      

        
        
        
      

    

And I take a link to the bottom tag that I found somewhere on the internet.

<pattern id="diagonal-stripes-4-8" x="0" y="0" width="8" height="8"    patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<rect x="0" y="0" width="4" height="8" style="stroke:none; fill:purple;" />
</pattern>