Circle radius is not being applied in ArcGIS API for JavaScript?

Question

I am working with the ArcGIS API for JavaScript 4.3

Everything is going well except this one little issue.

I am trying to allow a user to add a location to our db. When they put in the address the [x,y] coords are created from the address to make a point

I then take the point, make it the center of a circle and then set a radius of that circle and add it to the map.

The problem: No matter what I do I only get a circle on the map without the radius.

Here is my code.

NearbyLocationsMap.prototype.GetPointsNearby = function (x, y, cb) {
    var PointsNearbyPromise = new Promise(function (resolve, reject) {
        resolve(1);
    });
    PointsNearbyPromise.then(function () {
        return point = nl.MakePointFromXY(x, y);
    })
    .then(nl.MakeCircleFromPoint)
    .then(nl.MakeCircleLayer)
    .then(nl.GoToCircle);
}

NearbyLocationsMap.prototype.MakePointFromXY = function (x, y) {
    return new nl.Point({
        x: x,
        y: y
    })
};

NearbyLocationsMap.prototype.MakeCircleFromPoint = function (point) {
    var radius = 25;
    return new nl.Circle(point,{
        radius: radius,
        radiusUnit: "miles",
        geodesic: true
    })
};

NearbyLocationsMap.prototype.MakeCircleLayer = function (circle) {
    nl.CircleLayer;
    nl.CircleLayer = new nl.GraphicsLayer({id: "circles"});
    nl.map.add(nl.CircleLayer);
    nl.N_graphic = new nl.Graphic({
        geometry: circle,
        symbol: nl.getRendererCircle()
    });
    nl.CIRCLE = circle;
    nl.CircleLayer.add(nl.N_graphic);
}

NearbyLocationsMap.prototype.GoToCircle = function () {
    var c_layer_extent = nl.CIRCLE.extent;
    nl.c_layer_extent = c_layer_extent;    
    return setTimeout(function () {
        nl.view.goTo({
            target: nl.c_layer_extent,
            zoom: 14
        }, {
            duration: 1000,
            easing: "linear"
        }, 500)
          .then(nl.findLocationsInCircle)
          .then(LocationModalLoading);
    });
};

NearbyLocationsMap.prototype.getRendererCircle = function () {
    return new nl.SimpleMarkerSymbol({
        style: "solid",
        color: "rgba(255, 255, 255, 0.5)",
        outline: {
            width: 2,
            color: "rgba(24, 69, 59, 1)",
        }
    });

    //return new nl.SimpleLineSymbol({
    //    color: "rgba(24, 69, 59, 1)",
    //    width: "2px",
    //    style: "short-dot"
    //});
}

Answer 1

I ended up finding the solution.

It was the render I was using. Here is the updated code.

NearbyLocationsMap.prototype.getRendererCircle = function () {
    return new nl.SimpleFillSymbol();
}