noData applied with theme

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myTheme = {
      palette: {
        line: [
          ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
          ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
          ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
          ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
          ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
          ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
        ]
      },
      graph: {
        backgroundColor: '#FBFCFE',
        noData: {
          visible: true,
          alpha: 0.2,
          backgroundColor: "#20b2db",
          fontSize: "16",
          textAlpha: 0.9,
          textDecoration: "none",
          wrapText: true
        },
        title: {
          fontFamily: 'Lato',
          fontSize: 14,
          // border: "1px solid black",
          padding: "15",
          fontColor: "#1E5D9E",
          adjustLayout: true
        },
        subtitle: {
          fontFamily: 'Lato',
          fontSize: 12,
          fontColor: "#777",
          padding: "5"
        },
        plot: {
          backgroundColor: 'red',
          marker: {
            size: 4
          }
        },
        tooltip: {
          visible: true,
          text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
          backgroundColor: "white",
          borderColor: "#e3e3e3",
          borderRadius: "5px",
          bold: true,
          fontSize: "12px",
          fontColor: "#2f2f2f",
          textAlign: 'left',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowDistance: 4,
          shadowColor: "#a1a1a1"
        },
        plotarea: {
          backgroundColor: 'transparent',
          borderRadius: "0 0 0 10",
          borderRight: "0px",
          borderTop: "0px",
          margin: "dynamic",
          borderLeft: '1px solid #1E5D9E',
          borderBottom: '1px solid #1E5D9E',
        },
        scaleX: {
          zooming: true,
          offsetY: -20,
          lineWidth: 0,
          padding: 20,
          margin: 20,
          label: {
            text: "Scale-X"
          },
          item: {
            padding: 5,
            fontColor: "#1E5D9E",
            fontFamily: 'Montserrat',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          },
          tick: {
            lineColor: '#D1D3D4',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          },
          guide: {
            visible: true,
            lineColor: '#D7D8D9',
            lineStyle: 'dotted',
            lineGapSize: '4px',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          }
        },
        scaleY: {
          zooming: true,
          lineWidth: 0,
          label: {
            text: "Scale-Y"
          },
          item: {
            padding: "0 10 0 0",
            fontColor: "#1E5D9E",
            fontFamily: 'Montserrat',
            rules: [{
              rule: "%i == 0",
              offsetX: 10,
              offsetY: 10,
              backgroundColor: 'none'
            }]
          },
          tick: {
            lineColor: '#D1D3D4',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          },
          guide: {
            visible: true,
            lineColor: '#D7D8D9',
            lineStyle: 'dotted',
            lineGapSize: '4px',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          }
        },
        scrollX: {
          bar: {
            backgroundColor: 'none',
            borderLeft: 'none',
            borderTop: 'none',
            borderBottom: 'none'
          },
          handle: {
            backgroundColor: '#1E5D9E',
            height: 5
          }
        },
        scrollY: {
          borderWidth: 0,
          bar: {
            backgroundColor: 'none',
            width: 14,
            borderLeft: 'none',
            borderTop: 'none',
            borderBottom: 'none'
          },
          handle: {
            borderWidth: 0,
            backgroundColor: '#1E5D9E',
            width: 5
          }
        },
        zoom: {
          backgroundColor: '#1E5D9E',
          alpha: .33,
          borderColor: '#000',
          borderWidth: 1
        },
        preview: {
          borderColor: '#1E5D9E',
          borderWidth: 1,
          adjustLayout: true,
          handle: {
            backgroundColor: '#1E5D9E',
            borderColor: '#1E5D9E'
          },
          mask: {
            backgroundColor: '#FFF',
            alpha: .95,
          }
        }
      }
    };

    var myConfig = {
      type: 'bar',
      noData: {

      },
      series: [{
        'values': []
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%',
      defaults: myTheme
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

var myTheme = {
  palette: {
    line: [
      ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
      ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
      ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
      ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
      ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
      ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
    ]
  },
  graph: {
    backgroundColor: '#FBFCFE',
    noData: {
      visible: true,
      alpha: 0.2,
      backgroundColor: "#20b2db",
      fontSize: "16",
      textAlpha: 0.9,
      textDecoration: "none",
      wrapText: true
    },
    title: {
      fontFamily: 'Lato',
      fontSize: 14,
      // border: "1px solid black",
      padding: "15",
      fontColor: "#1E5D9E",
      adjustLayout: true
    },
    subtitle: {
      fontFamily: 'Lato',
      fontSize: 12,
      fontColor: "#777",
      padding: "5"
    },
    plot: {
      backgroundColor: 'red',
      marker: {
        size: 4
      }
    },
    tooltip: {
      visible: true,
      text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
      backgroundColor: "white",
      borderColor: "#e3e3e3",
      borderRadius: "5px",
      bold: true,
      fontSize: "12px",
      fontColor: "#2f2f2f",
      textAlign: 'left',
      padding: '15px',
      shadow: true,
      shadowAlpha: 0.2,
      shadowBlur: 5,
      shadowDistance: 4,
      shadowColor: "#a1a1a1"
    },
    plotarea: {
      backgroundColor: 'transparent',
      borderRadius: "0 0 0 10",
      borderRight: "0px",
      borderTop: "0px",
      margin: "dynamic",
      borderLeft: '1px solid #1E5D9E',
      borderBottom: '1px solid #1E5D9E',
    },
    scaleX: {
      zooming: true,
      offsetY: -20,
      lineWidth: 0,
      padding: 20,
      margin: 20,
      label: {
        text: "Scale-X"
      },
      item: {
        padding: 5,
        fontColor: "#1E5D9E",
        fontFamily: 'Montserrat',
        rules: [{
          rule: "%i == 0",
          visible: false
        }]
      },
      tick: {
        lineColor: '#D1D3D4',
        rules: [{
          rule: "%i == 0",
          visible: false
        }]
      },
      guide: {
        visible: true,
        lineColor: '#D7D8D9',
        lineStyle: 'dotted',
        lineGapSize: '4px',
        rules: [{
          rule: "%i == 0",
          visible: false
        }]
      }
    },
    scaleY: {
      zooming: true,
      lineWidth: 0,
      label: {
        text: "Scale-Y"
      },
      item: {
        padding: "0 10 0 0",
        fontColor: "#1E5D9E",
        fontFamily: 'Montserrat',
        rules: [{
          rule: "%i == 0",
          offsetX: 10,
          offsetY: 10,
          backgroundColor: 'none'
        }]
      },
      tick: {
        lineColor: '#D1D3D4',
        rules: [{
          rule: "%i == 0",
          visible: false
        }]
      },
      guide: {
        visible: true,
        lineColor: '#D7D8D9',
        lineStyle: 'dotted',
        lineGapSize: '4px',
        rules: [{
          rule: "%i == 0",
          visible: false
        }]
      }
    },
    scrollX: {
      bar: {
        backgroundColor: 'none',
        borderLeft: 'none',
        borderTop: 'none',
        borderBottom: 'none'
      },
      handle: {
        backgroundColor: '#1E5D9E',
        height: 5
      }
    },
    scrollY: {
      borderWidth: 0,
      bar: {
        backgroundColor: 'none',
        width: 14,
        borderLeft: 'none',
        borderTop: 'none',
        borderBottom: 'none'
      },
      handle: {
        borderWidth: 0,
        backgroundColor: '#1E5D9E',
        width: 5
      }
    },
    zoom: {
      backgroundColor: '#1E5D9E',
      alpha: .33,
      borderColor: '#000',
      borderWidth: 1
    },
    preview: {
      borderColor: '#1E5D9E',
      borderWidth: 1,
      adjustLayout: true,
      handle: {
        backgroundColor: '#1E5D9E',
        borderColor: '#1E5D9E'
      },
      mask: {
        backgroundColor: '#FFF',
        alpha: .95,
      }
    }
  }
};

var myConfig = {
  type: 'bar',
  noData: {

  },
  series: [{
    'values': []
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%',
  defaults: myTheme
});