Can't add marker pattern in chart

Using the following Plotly JSON content:

    "name": 'SF Zoo',
    "x": ['giraffes', 'orangutans', 'monkeys'],
    "y": [20,14,23],
    "type": "bar",
    "marker": {
      "pattern": {
        "shape": "x"
    "name": 'LA Zoo',
    "x":  ['giraffes', 'orangutans', 'monkeys'],
    "y": [12,18,29],
    "type": "bar",

and the following layout

  "barmode": "stack",
  "barnorm": "percent"

I can't make plotly pattern the plot (i.e, I get this:

instead of this

Using Plotly on codepen work as expected

Hi @susgadol It looks like this is a bug where pattern properties aren't supported :disappointed: I don't have a timeline on a fix for this, but I'll post here if I get any updates

1 Like

Hey @Tess , any update on a resolution for this bug? Would really love to use this feature.

Hi @jericsinger Thanks for checking in!

We haven't been able to prioritize this one yet :disappointed: I'd recommend using a custom component instead of our native chart component, which is powered by plotly

Here's the plotly doc for getting started

Understood @Tess. Would you mind sharing the iFrame code you used in your response to get me started? Thanks in advance!

Yep :blush:

<script src="" charset="utf-8">
var trace1 = {
  x: ['Liam', 'Sophie', 'Jacob', 'Mia', 'William', 'Olivia'],
  y: [8.0, 8.0, 12.0, 12.0, 13.0, 20.0],
  type: 'bar',
  text: ['4.17 below the mean', '4.17 below the mean', '0.17 below the mean', '0.17 below the mean', '0.83 above the mean', '7.83 above the mean'],
  marker: {
    color: 'rgb(142,124,195)',
    pattern: {
      shape: 'x'

var data = [trace1];

var layout = {
  title: 'Number of Graphs Made this Week',
    family: 'Raleway, sans-serif'
  showlegend: false,
  xaxis: {
    tickangle: -45
  yaxis: {
    zeroline: false,
    gridwidth: 2
  bargap :0.05

Plotly.newPlot('myDiv', data, layout);
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
1 Like