{
  "data": [
    { "type": "bar",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "black", "width": 1}
      },
      "xaxis": "x1"
    }, 
    { "type": "bar",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "textposition": "outside",
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "black", "width": 1}
      },
      "xaxis": "x2"
    },
    { "type": "bar",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "black", "width": 1},
        "pattern" : {
          "shape": "/",
          "solidity": [ 0.3, 0.3, 0.3, 0.3, 0.7]
        }
      },
      "xaxis": "x3"
    },
    { "type": "bar",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "textposition": "outside",
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "black", "width": 1},
        "pattern" : {
          "shape": "/",
          "solidity": [ 0.3, 0.3, 0.3, 0.3, 0.7]
        }
      },
      "xaxis": "x4"
    },
    { "type": "scatter",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "fill": "tozeroy",
      "fillcolor": "black",
      "mode": "lines+markers+text",
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "textposition": "bottom center",
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"]
      },
      "line": { "color": "lightgrey", "width": 4},
      "xaxis": "x1",
      "yaxis": "y2"
    },
    { "type": "scatter",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "fill": "tozeroy",
      "fillcolor": "black",
      "mode": "lines+markers+text",
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "textposition": "top center",
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"]
      },
      "line": { "color": "lightgrey", "width": 4},
      "xaxis": "x2",
      "yaxis": "y2"
    },
    { "type": "scatter",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "fill": "tozeroy",
      "fillcolor": "black",
      "fillpattern": {"shape": "/"},
      "mode": "lines+markers+text",
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "textposition": "bottom center",
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"]
      },
      "line": { "color": "lightgrey", "width": 4},
      "xaxis": "x3",
      "yaxis": "y2"
    },
    { "type": "scatter",
      "x": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "y": [ 30, 20, 50, 30, 40],
      "fill": "tozeroy",
      "fillcolor": "black",
      "fillpattern": {"shape": "/"},
      "mode": "lines+markers+text",
      "text": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "textposition": "top center",
      "marker": {
        "color": [ "white", "lightgrey", "grey", "black", "black"]
      },
      "line": { "color": "lightgrey", "width": 4},
      "xaxis": "x4",
      "yaxis": "y2"
    },
    { "type": "pie",
      "labels": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "values": [ 30, 20, 50, 30, 40],
      "marker": {
        "colors": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "lightgrey", "width": 2}
      },
      "sort": false,
      "domain": { "row": 2, "column": 0}
    }, 
    { "type": "pie",
      "labels": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "values": [ 30, 20, 50, 30, 40],
      "marker": {
        "colors": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "lightgrey", "width": 2}
      },
      "sort": false,
      "domain": { "row": 2, "column": 1},
      "textposition": "outside"
    },
    { "type": "pie",
      "labels": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "values": [ 30, 20, 50, 30, 40],
      "marker": {
        "colors": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "lightgrey", "width": 2},
        "pattern" : { "shape": "/"}
      },
      "sort": false,
      "domain": { "row": 2, "column": 2}
    }, 
    { "type": "pie",
      "labels": [ "giraffe", "orangutan", "monkey", "tiger", "lion"],
      "values": [ 30, 20, 50, 30, 40],
      "marker": {
        "colors": [ "white", "lightgrey", "grey", "black", "black"],
        "line": { "color": "lightgrey", "width": 2},
        "pattern" : { "shape": "/"}
      },
      "sort": false,
      "domain": { "row": 2, "column": 3},
      "textposition": "outside"
    }
  ],
  "layout": {
    "title": { "text": "textfont color variations"},
    "grid": {
      "rows": 3,
      "columns": 4
    },
    "width": 1200,
    "height": 900,
    "showlegend": false
  }
}