Color Fill area or Color background

Custom Indicators
1

Hello Traders,

I’m trying to color the area between Stoch K and Stoch D depending on K > D (green) or the opposite (red), or else color the background of the Stoch Indicato with the same conditions. I tried the following using “Polygon” (idea taken from the Bollinger Bands with Fill), but didn’t reach any result.

Can you please edit the following code or propose something else? Thanks
const predef = require(“./tools/predef”);
const meta = require(“./tools/meta”);
const MovingHigh = require(“./tools/MovingHigh”);
const MovingLow = require(“./tools/MovingLow”);
const SMA = require(“./tools/SMA”);
const p = require(“./tools/plotting”);
const { du, op, px, min, max } = require(‘./tools/graphics’);

class slowStochastic {
init() {
this.highest = MovingHigh(this.props.period);
this.lowest = MovingLow(this.props.period);
this.sma = SMA(this.props.smoothPeriod);
this.sma2 = SMA(this.props.Slow_K_sma_period);
}

map(d, i, history) {
    if(i < 1) return {}
    const last = history.back(1)
    const high = d.high();
    const low = d.low();
    const close = d.close();
    const hh = this.highest(high);
    const ll = this.lowest(low);
    const K = (hh - ll) === 0 ? 0 : this.sma2(100 * (close - ll) / (hh - ll));
    const D = this.sma(K);
    return {
        K,
        D,
        middle: 50,
        // overbought: 80,
        // oversold: 20,
        overBought: this.props.overBought,
        overSold: this.props.overSold,
        graphics: {
            items: [
                {
                    tag: 'Shapes',
                    key: 'shading',
                    primitives: [
                        {
                            tag: 'Polygon',
                            points: [
                                
                                {
                                    x: du(d.index()),
                                    y: du(K)
                                },
                                {
                                    x: du(d.index()-1),
                                    y: du(K)
                                },
                                {
                                    x: du(d.index() - 1),
                                    y: du(D)
                                },
                                {
                                    x: du(d.index()),
                                    y: du(D)
                                },
                            ]
                        }
                    ],
                    fillStyle: {
                        opacity: this.props.opacity,
                        color: this.props.fillColor
                    }
                }
            ]
        }
    };
}


filter(d) {
    return predef.filters.isNumber(d.D);
}

}

module.exports = {
name: “KKSlowSto”,
title: “KKSLOSTO”,
description: “KKSlowStochastic”,
calculator: slowStochastic,
params: {
period: predef.paramSpecs.period(14),
smoothPeriod: predef.paramSpecs.period(3),
Slow_K_sma_period: predef.paramSpecs.period(3),
overBought: predef.paramSpecs.period(80),
overSold: predef.paramSpecs.period(20),
},
validate(obj) {
if (obj.period < 1) {
return meta.error(“period”, “Period should be a positive number”);
}
if (obj.smoothPeriod < 2) {
return meta.error(“smoothPeriod”, “Smooth period should be greater than 1”);
}
return undefined;
},
inputType: meta.InputType.BARS,
areaChoice: meta.AreaChoice.NEW,
plots: {
K: { title: “%K” },
D: { title: “%D” },
overBought: { title: “Over Bought” },
overSold: { title: “Over Sold” },
middle: { displayOnly: true },
// overBought: { title: “Over Bought” },
// overSold: { title: “Over Sold” }
},
tags: [predef.tags.Oscillators],
schemeStyles: {
dark: {
K: predef.styles.plot({
color: “cyan”,
lineWidth: 2

        }),
        D: predef.styles.plot({
            color: "red",
            lineWidth: 1
        }),
        overBought: predef.styles.plot({
        color: "red",
        lineStyle: 3
}),
        overSold: predef.styles.plot({
        color: "red",
        lineStyle: 3
}),
        middle: predef.styles.plot({
        color: "red",
        lineStyle: 3
}),
    }
}

};