/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.aroonosc.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "aroonosc";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.avgprice.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "avgprice";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.cci.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "cci";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.hma.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "hma";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.sma.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "sma";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.emv.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "emv";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.wma.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "wma";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.vwma.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "vwma";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.mama.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "mama";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the MAMA **************************************
        let mamaValues = [];
        let famaValues = [];

        for(let d in taapiData) {
            mamaValues.push({
                name: `
                    <span style="color:${styles.valueMAMA};">${roundIndicatorValue(taapiData[d].result.valueMAMA, "auto")}</span> |
                    <span style="color:${styles.valueFAMA};">${roundIndicatorValue(taapiData[d].result.valueFAMA, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueMAMA, "auto")
            });

            famaValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueFAMA, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefMAMA = {}; //styles || {};

            seriesDefMAMA.name = displayName;
            seriesDefMAMA.linkedTo = 'main';
            seriesDefMAMA.type = 'line';
            seriesDefMAMA.turboThreshold = 0;
            seriesDefMAMA.lineWidth = 1;
            seriesDefMAMA.color = styles.valueMAMA;
            seriesDefMAMA.data = mamaValues;
            seriesDefMAMA.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefMAMA.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesMAMA = chart.addSeries(seriesDefMAMA);
            
            indicatorStack_pushPlot(indicatorStackId, seriesMAMA, "line", "MAMA");
        } else {

            let seriesMAMA = series_getCached(indicatorStackId, "MAMA");

            for(let v in mamaValues) {
                seriesMAMA.addPoint(mamaValues[v]);
            }

        }

        // ************************************** Plot the Lead **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefFAMA = {}; //styles || {};

            seriesDefFAMA.name = null;
            seriesDefFAMA.linkedTo = 'main';
            seriesDefFAMA.type = 'line';
            seriesDefFAMA.turboThreshold = 0;
            seriesDefFAMA.lineWidth = 1;
            seriesDefFAMA.color = styles.valueFAMA;
            seriesDefFAMA.data = famaValues;
            seriesDefFAMA.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefFAMA.enableMouseTracking = false;
            seriesDefFAMA.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesFAMA = chart.addSeries(seriesDefFAMA);
            
            indicatorStack_pushPlot(indicatorStackId, seriesFAMA, "line", "FAMA");
        } else {

            let seriesFAMA = series_getCached(indicatorStackId, "FAMA");

            for(let v in famaValues) {
                seriesFAMA.addPoint(seriesFAMA[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.typprice.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "typprice";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            /* seriesDef.states = {
                hover: {
                    lineWidthPlus: 0
                }
            }; */
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ema.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ema";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dema.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dema";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.tema.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "tema";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.zlema.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "zlema";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.trima.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "trima";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.rsi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "rsi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);

        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        indicatorDefinitions.rsi.draw.environment();

    });
}

indicatorDefinitions.rsi.draw.environment = () => {

    let bandData = [];
    let bandMiddleData = [];

    let candles = JSON.parse(localStorage.getItem("omniachart_candles"));

    for(let c in candles) {
        bandData.push([candles[c].timestamp * 1000, 25, 75]);
        bandMiddleData.push([candles[c].timestamp * 1000, 50]);
    }

    // Add outer bands
    let seriesOuterBandsDef = {};

    seriesOuterBandsDef.name = "Band";
    seriesOuterBandsDef.linkedTo = 'main';
    seriesOuterBandsDef.type = 'arearange';
    seriesOuterBandsDef.dashStyle = "dash";
    //seriesOuterBandsDef.color = "lightgrey";
    seriesOuterBandsDef.lineWidth = 1;
    seriesOuterBandsDef.fillOpacity = 0.06;
    seriesOuterBandsDef.data = bandData;
    seriesOuterBandsDef.yAxis = "rsi";
    seriesOuterBandsDef.enableMouseTracking = false;

    let seriesOuterBand = chart.addSeries(seriesOuterBandsDef);

    // Add the middle band
    let seriesMiddleBandDef = {};

    seriesMiddleBandDef.name = "Middle Band";
    seriesMiddleBandDef.linkedTo = 'main';
    seriesMiddleBandDef.type = 'line';
    seriesMiddleBandDef.dashStyle = "dash";
    seriesMiddleBandDef.color = "grey";
    seriesMiddleBandDef.lineWidth = 1;
    seriesMiddleBandDef.fillOpacity = 0.06;
    seriesMiddleBandDef.data = bandMiddleData;
    seriesMiddleBandDef.yAxis = "rsi";
    seriesMiddleBandDef.enableMouseTracking = false;

    let seriesMiddleBand = chart.addSeries(seriesMiddleBandDef);

    //indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

    //yAxis_show(indicator);
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.mom.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "mom";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.medprice.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "medprice";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.mfi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "mfi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ultosc.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ultosc";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod1} ${parameters.optInTimePeriod2} ${parameters.optInTimePeriod3}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.fosc.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "fosc";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.tr.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "tr";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.atr.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "atr";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.obv.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "obv";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.psar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "psar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.acceleration_factor_step}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        let plotName = "main";

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            //seriesDef.dashStyle = "dash";
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 0;
            //seriesDef.connectEnds = false;
            seriesDef.dataGrouping = {
                enabled: false,
            }
            seriesDef.marker = {
                enabled: true,
                radius: 2
            };
            seriesDef.states = {
                hover: {
                    lineWidthPlus: 0
                }
            };
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.tdsequential2.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "tdsequential2";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        let setupIndexes = []; // Greens and reds indexes
        let countdownIndexes = []; // Greens and reds countdowns

        let previousSellCountdownIndex = null;
        let previousBuyCountdownIndex = null;
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            //console.log(taapiData[d].result);

            let foundAPoint = false;

            let sellSetupIndex = taapiData[d].result.sellSetupIndex;
            let buySetupIndex = taapiData[d].result.buySetupIndex;
            let sellCountdownIndex = taapiData[d].result.sellCountdownIndex || taapiData[d].result.sellCountDownIndex;
            let buyCountdownIndex = taapiData[d].result.buyCountdownIndex || taapiData[d].result.buyCountDownIndex;

            if(sellSetupIndex > 0) {

                setupIndexes.push({
                    name: `
                        <span style="color:${styles.sellSetup};">${sellSetupIndex}</span>
                        `,
                    index: `
                        <span style="color:${styles.sellSetup};">${sellSetupIndex}</span>
                        `,
                    pos: "top",
                    x: taapiData[d].timestamp,
                    y: roundIndicatorValue(taapiData[d].prices.high, "auto"),
                });

                foundAPoint = true;

            } else if(buySetupIndex > 0) {

                setupIndexes.push({
                    name: `
                        <span style="color:${styles.buySetup};">${buySetupIndex}</span>
                        `,
                    pos: "top",
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].prices.high, "auto")
                });

                foundAPoint = true;
            } 
            /* else {

                setupIndexes.push({
                    name: ``,
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].prices.high, "auto")
                });

            } */

            if(sellCountdownIndex > 0 && sellCountdownIndex !== previousSellCountdownIndex) {

                setupIndexes.push({
                    name: `
                        <span style="color:${styles.sellSetup};">${sellCountdownIndex}</span>
                        `,
                    pos: "bottom",
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].prices.low, "auto")
                });

                previousSellCountdownIndex = sellCountdownIndex;

                foundAPoint = true;

            } else if(buyCountdownIndex > 0 && buyCountdownIndex !== previousBuyCountdownIndex) {

                setupIndexes.push({
                    name: `
                        <span style="color:${styles.buySetup};">${buyCountdownIndex}</span>
                        `,
                    pos: "bottom",
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].prices.low, "auto")
                });

                previousBuyCountdownIndex = buyCountdownIndex;

                foundAPoint = true;
            } 

            if(!foundAPoint) {

                setupIndexes.push({
                    name: ``,
                    pos: "nowhere",
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].prices.high, "auto")
                });

            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            //seriesDef.dashStyle = "dash";
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 0;
            //seriesDef.connectEnds = false;
            seriesDef.dataGrouping = {
                enabled: false,
            },
            /* seriesDef.dataLabels = {
                enabled: true,
                y: 20,
                formatter: function() {
                    return this.point.name || "";
                }
            }, */
            seriesDef.dataLabels = [{
                enabled: true,
                formatter: function() {

                    if(this.point.pos === "top") {
                        return this.point.name || "";
                    }
                    
                    return "";
                }
            }, {
                enabled: true,
                y: 20,
                formatter: function() {
                    if(this.point.pos === "bottom") {
                        return this.point.name || "";
                    }
                    
                    return "";
                }
            }],
            seriesDef.marker = {
                enabled: false,
                radius: 0
            };
            seriesDef.states = {
                hover: {
                    lineWidthPlus: 0
                }
            };
            seriesDef.data = setupIndexes;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "setupIndex");
        } else {

            let series = series_getCached(indicatorStackId, "setupIndex");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        /* if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = null;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            //seriesDef.dashStyle = "dash";
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 0;
            //seriesDef.connectEnds = false;
            seriesDef.dataGrouping = {
                enabled: false,
            },
            seriesDef.dataLabels = {
                enabled: true,
                formatter: function() {
                    return this.point.name || "";
                }
            },
            seriesDef.marker = {
                enabled: false,
                radius: 0
            };
            seriesDef.states = {
                hover: {
                    lineWidthPlus: 0
                }
            };
            seriesDef.data = countdownIndexes;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "countdownIndex");
        } else {

            let series = series_getCached(indicatorStackId, "countdownIndex");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        } */
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.bb.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "bb";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;
    let displayName_cloud = `${indicatorDefinition.shortName} (Cloud) ${parameters.period}`;
    let displayName_middleBand = `${indicatorDefinition.shortName} (Middle Band) ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the Cloud ****************************** */
        let valuesCloud = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* valuesCloud.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto"), 
                roundIndicatorValue(taapiData[d].result.valueUpperBand, "auto")
            ]); */
            valuesCloud.push({
                name: `
                    <span style="color:${styles.color};">L:${roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto")}</span> |
                    <span style="color:${styles.color};">M:${roundIndicatorValue(taapiData[d].result.valueMiddleBand, "auto")}</span> |
                    <span style="color:${styles.color};">U:${roundIndicatorValue(taapiData[d].result.valueUpperBand, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                low: roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto"),
                high: roundIndicatorValue(taapiData[d].result.valueUpperBand, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesCloudDef = styles || {};

            seriesCloudDef.name = displayName;
            seriesCloudDef.linkedTo = 'main';
            seriesCloudDef.type = 'arearange';
            seriesCloudDef.turboThreshold = 0;
            seriesCloudDef.lineWidth = 1;
            seriesCloudDef.fillOpacity = 0.1;
            seriesCloudDef.data = valuesCloud;
            seriesCloudDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesCloudDef.dataGrouping = {
                enabled: false,
            }

            let seriesCloud = chart.addSeries(seriesCloudDef);

            indicatorStack_pushPlot(indicatorStackId, seriesCloud, "arearange", "cloud");
        } else {

            let seriesCloud = SERIES_MEM_CACHE[`${indicatorStackId}_cloud`];

            for(let v in valuesCloud) {
                seriesCloud.addPoint(valuesCloud[v]);
            }

        }

        /* ****************************** Plot Middle Band ****************************** */
        let valuesMiddleBand = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            valuesMiddleBand.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueMiddleBand, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesMiddleBandDef = styles || {};

            seriesMiddleBandDef.name = displayName_middleBand;
            seriesMiddleBandDef.linkedTo = 'main';
            seriesMiddleBandDef.type = 'line';
            seriesMiddleBandDef.turboThreshold = 0;
            seriesMiddleBandDef.lineWidth = 1;
            seriesMiddleBandDef.fillOpacity = 0.1;
            seriesMiddleBandDef.data = valuesMiddleBand;
            seriesMiddleBandDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesMiddleBandDef.enableMouseTracking = false;
            seriesMiddleBandDef.dataGrouping = {
                enabled: false,
            }

            let seriesMiddleBand = chart.addSeries(seriesMiddleBandDef);

            indicatorStack_pushPlot(indicatorStackId, seriesMiddleBand, "line", "middleband");
        } else {

            let seriesMiddleBand = series_getCached(indicatorStackId, "middleband");

            for(let v in valuesMiddleBand) {
                seriesMiddleBand.addPoint(valuesMiddleBand[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.accbands.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "accbands";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;
    let displayName_cloud = `${indicatorDefinition.shortName} (Cloud) ${parameters.period}`;
    let displayName_middleBand = `${indicatorDefinition.shortName} (Middle Band) ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the Cloud ****************************** */
        let valuesCloud = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* valuesCloud.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto"), 
                roundIndicatorValue(taapiData[d].result.valueUpperBand, "auto")
            ]); */
            valuesCloud.push({
                name: `
                    <span style="color:${styles.color};">L:${roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto")}</span> |
                    <span style="color:${styles.color};">M:${roundIndicatorValue(taapiData[d].result.valueMiddleBand, "auto")}</span> |
                    <span style="color:${styles.color};">U:${roundIndicatorValue(taapiData[d].result.valueUpperBand, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                low: roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto"),
                high: roundIndicatorValue(taapiData[d].result.valueUpperBand, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesCloudDef = styles || {};

            seriesCloudDef.name = displayName;
            seriesCloudDef.linkedTo = 'main';
            seriesCloudDef.type = 'arearange';
            seriesCloudDef.turboThreshold = 0;
            seriesCloudDef.lineWidth = 1;
            seriesCloudDef.fillOpacity = 0.1;
            seriesCloudDef.data = valuesCloud;
            seriesCloudDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesCloudDef.dataGrouping = {
                enabled: false,
            }

            let seriesCloud = chart.addSeries(seriesCloudDef);

            indicatorStack_pushPlot(indicatorStackId, seriesCloud, "arearange", "cloud");
        } else {

            let seriesCloud = SERIES_MEM_CACHE[`${indicatorStackId}_cloud`];

            for(let v in valuesCloud) {
                seriesCloud.addPoint(valuesCloud[v]);
            }

        }

        /* ****************************** Plot Middle Band ****************************** */
        let valuesMiddleBand = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            valuesMiddleBand.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueMiddleBand, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesMiddleBandDef = styles || {};

            seriesMiddleBandDef.name = displayName_middleBand;
            seriesMiddleBandDef.linkedTo = 'main';
            seriesMiddleBandDef.type = 'line';
            seriesMiddleBandDef.turboThreshold = 0;
            seriesMiddleBandDef.lineWidth = 1;
            seriesMiddleBandDef.fillOpacity = 0.1;
            seriesMiddleBandDef.data = valuesMiddleBand;
            seriesMiddleBandDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesMiddleBandDef.enableMouseTracking = false;
            seriesMiddleBandDef.dataGrouping = {
                enabled: false,
            }

            let seriesMiddleBand = chart.addSeries(seriesMiddleBandDef);

            indicatorStack_pushPlot(indicatorStackId, seriesMiddleBand, "line", "middleband");
        } else {

            let seriesMiddleBand = series_getCached(indicatorStackId, "middleband");

            for(let v in valuesMiddleBand) {
                seriesMiddleBand.addPoint(valuesMiddleBand[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ichimoku.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ichimoku";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;
    /* let displayName_cloud = `${indicatorDefinition.shortName} (Cloud) ${parameters.period}`;
    let displayName_middleBand = `${indicatorDefinition.shortName} (Middle Band) ${parameters.period}`; */

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the Cloud ****************************** */
        let valuesCloud = [];
        let valuesSpanB = [];
        let valuesConversion = [];
        let valuesBase = [];
        //let valuesLaggingSpanA = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* valuesCloud.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueLowerBand, "auto"), 
                roundIndicatorValue(taapiData[d].result.valueSpanB, "auto")
            ]); */
            valuesCloud.push({
                name: `
                    <span style="color:${styles.conversion};">Conversion:${roundIndicatorValue(taapiData[d].result.conversion, "auto")}</span> |
                    <span style="color:${styles.base};">Base:${roundIndicatorValue(taapiData[d].result.base, "auto")}</span> |
                    <span style="color:${styles.currentSpanA};">Span A:${roundIndicatorValue(taapiData[d].result.currentSpanA, "auto")}</span> |
                    <span style="color:${styles.currentSpanB};">Span B:${roundIndicatorValue(taapiData[d].result.currentSpanB, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                color: styles.currentSpanA,
                low: roundIndicatorValue(taapiData[d].result.currentSpanA, "auto"),
                high: roundIndicatorValue(taapiData[d].result.currentSpanB, "auto")
            });

            valuesSpanB.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.currentSpanB, "auto")
            ]);

            valuesConversion.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.conversion, "auto")
            ]);

            valuesBase.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.base, "auto")
            ]);

            /* valuesLaggingSpanA.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.laggingSpanB, "auto")
            ]); */
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesCloudDef = {};

            seriesCloudDef.name = displayName;
            seriesCloudDef.linkedTo = 'main';
            seriesCloudDef.type = 'arearange';
            seriesCloudDef.turboThreshold = 0;
            seriesCloudDef.lineWidth = 1;
            seriesCloudDef.fillOpacity = 0.3;
            seriesCloudDef.color = styles.currentSpanA;
            seriesCloudDef.data = valuesCloud;
            seriesCloudDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesCloudDef.states = {
                hover: {
                    lineWidthPlus: 0
                }
            };
            seriesCloudDef.dataGrouping = {
                enabled: false,
            }

            let seriesCloud = chart.addSeries(seriesCloudDef);

            indicatorStack_pushPlot(indicatorStackId, seriesCloud, "arearange", "cloud");
        } else {

            let seriesCloud = SERIES_MEM_CACHE[`${indicatorStackId}_cloud`];

            for(let v in valuesCloud) {
                seriesCloud.addPoint(valuesCloud[v]);
            }

        }

        /* ****************************** Plot Span B ****************************** */

        if(config.chart.repaintSkipCache || createNew) {

            let seriesSpanBDef = {};

            seriesSpanBDef.name = displayName+" (Upper)";
            seriesSpanBDef.linkedTo = 'main';
            seriesSpanBDef.type = 'line';
            seriesSpanBDef.turboThreshold = 0;
            seriesSpanBDef.lineWidth = 1;
            //seriesSpanBDef.fillOpacity = 0.1;
            seriesSpanBDef.color = styles.currentSpanB;
            seriesSpanBDef.data = valuesSpanB;
            seriesSpanBDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesSpanBDef.enableMouseTracking = false;
            seriesSpanBDef.dataGrouping = {
                enabled: false,
            }

            let seriesSpanB = chart.addSeries(seriesSpanBDef);

            indicatorStack_pushPlot(indicatorStackId, seriesSpanB, "line", "SpanB");
        } else {

            let seriesSpanB = series_getCached(indicatorStackId, "SpanB");

            for(let v in valuesSpanB) {
                seriesSpanB.addPoint(valuesSpanB[v]);
            }

        }

        /* ****************************** Plot Conversion ****************************** */

        if(config.chart.repaintSkipCache || createNew) {

            let seriesConversionDef = {};

            seriesConversionDef.name = "Conversion";
            seriesConversionDef.linkedTo = 'main';
            seriesConversionDef.type = 'line';
            seriesConversionDef.turboThreshold = 0;
            seriesConversionDef.lineWidth = 1;
            //seriesConversionDef.fillOpacity = 0.1;
            seriesConversionDef.color = styles.conversion;
            seriesConversionDef.data = valuesConversion;
            seriesConversionDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesConversionDef.enableMouseTracking = false;
            seriesConversionDef.dataGrouping = {
                enabled: false,
            }

            let seriesConversion = chart.addSeries(seriesConversionDef);

            indicatorStack_pushPlot(indicatorStackId, seriesConversion, "line", "Conversion");
        } else {

            let seriesConversion = series_getCached(indicatorStackId, "Conversion");

            for(let v in valuesConversion) {
                seriesConversion.addPoint(valuesConversion[v]);
            }

        }

        /* ****************************** Plot Base line ****************************** */

        if(config.chart.repaintSkipCache || createNew) {

            let seriesBaseDef = {};

            seriesBaseDef.name = "Base";
            seriesBaseDef.linkedTo = 'main';
            seriesBaseDef.type = 'line';
            seriesBaseDef.turboThreshold = 0;
            seriesBaseDef.lineWidth = 1;
            //seriesBaseDef.fillOpacity = 0.1;
            seriesBaseDef.color = styles.base;
            seriesBaseDef.data = valuesBase;
            seriesBaseDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesBaseDef.enableMouseTracking = false;
            seriesBaseDef.dataGrouping = {
                enabled: false,
            }

            let seriesBase = chart.addSeries(seriesBaseDef);

            indicatorStack_pushPlot(indicatorStackId, seriesBase, "line", "Base");
        } else {

            let seriesBase = series_getCached(indicatorStackId, "Base");

            for(let v in valuesBase) {
                seriesBase.addPoint(valuesBase[v]);
            }

        }

        /* ****************************** Plot lagging span ****************************** */

        /* if(config.chart.repaintSkipCache || createNew) {

            let seriesLaggingSpanADef = {};

            seriesLaggingSpanADef.name = "LaggingSpanA";
            seriesLaggingSpanADef.linkedTo = 'main';
            seriesLaggingSpanADef.type = 'line';
            seriesLaggingSpanADef.turboThreshold = 0;
            seriesLaggingSpanADef.lineWidth = 1;
            //seriesLaggingSpanADef.fillOpacity = 0.1;
            seriesLaggingSpanADef.color = "purple"; //styles.laggingSpanA;
            seriesLaggingSpanADef.data = valuesLaggingSpanA;
            seriesLaggingSpanADef.yAxis = indicatorDefinition.draw.yAxis;
            seriesLaggingSpanADef.enableMouseTracking = false;
            seriesLaggingSpanADef.dataGrouping = {
                enabled: false,
            }

            let seriesLaggingSpanA = chart.addSeries(seriesLaggingSpanADef);

            indicatorStack_pushPlot(indicatorStackId, seriesLaggingSpanA, "line", "LaggingSpanA");
        } else {

            let seriesLaggingSpanA = series_getCached(indicatorStackId, "LaggingSpanA");

            for(let v in valuesLaggingSpanA) {
                seriesLaggingSpanA.addPoint(valuesLaggingSpanA[v]);
            }

        } */
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.macd.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "macd";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;
    let displayName_macd = `MACD (${parameters.optInFastPeriod}, ${parameters.optInSlowPeriod}, ${parameters.optInSignalPeriod})`;
    let displayName_signal = `Signal`;
    let displayName_histogram = `Histogram`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the macd **************************************
        let macdValues = [];

        for(let d in taapiData) {
            macdValues.push({
                name: `
                    <span style="color:${styles.valueMACD};">${roundIndicatorValue(taapiData[d].result.valueMACD, "auto")}</span> |
                    <span style="color:${styles.valueMACDSignal};">${roundIndicatorValue(taapiData[d].result.valueMACDSignal, "auto")}</span> |
                    <span style="color:${taapiData[d].result.valueMACDHist >= 0 ? "green" : "red"};">${roundIndicatorValue(taapiData[d].result.valueMACDHist, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueMACD, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefMacd = {}; //styles || {};

            seriesDefMacd.name = displayName_macd;
            seriesDefMacd.linkedTo = 'main';
            seriesDefMacd.type = 'line';
            seriesDefMacd.turboThreshold = 0;
            seriesDefMacd.lineWidth = 1;
            seriesDefMacd.color = styles.valueMACD;
            seriesDefMacd.data = macdValues;
            seriesDefMacd.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefMacd.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesMacd = chart.addSeries(seriesDefMacd);
            
            indicatorStack_pushPlot(indicatorStackId, seriesMacd, "line", "macd");
        } else {

            let seriesMacd = series_getCached(indicatorStackId, "macd");

            for(let v in macdValues) {
                seriesMacd.addPoint(macdValues[v]);
            }

        }

        // ************************************** Plot the signal **************************************

        let signalValues = [];

        for(let d in taapiData) {
            signalValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueMACDSignal, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefSignal = {}; //styles || {};

            seriesDefSignal.name = null;
            seriesDefSignal.linkedTo = 'main';
            seriesDefSignal.type = 'line';
            seriesDefSignal.turboThreshold = 0;
            seriesDefSignal.lineWidth = 1;
            seriesDefSignal.color = styles.valueMACDSignal;
            seriesDefSignal.data = signalValues;
            seriesDefSignal.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefSignal.enableMouseTracking = false;
            seriesDefSignal.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesSignal = chart.addSeries(seriesDefSignal);
            
            indicatorStack_pushPlot(indicatorStackId, seriesSignal, "line", "signal");
        } else {

            let seriesSignal = series_getCached(indicatorStackId, "signal");

            for(let v in signalValues) {
                seriesSignal.addPoint(signalValues[v]);
            }

        }

        // ************************************** Plot the histogram **************************************

        let positiveHistogramValues = [];
        let negativeHistogramValues = [];

        for(let d in taapiData) {

            if(taapiData[d].result.valueMACDHist >= 0) {
                positiveHistogramValues.push([
                    taapiData[d].timestamp, 
                    roundIndicatorValue(taapiData[d].result.valueMACDHist, "auto")
                ]);
            } else {
                negativeHistogramValues.push([
                    taapiData[d].timestamp, 
                    roundIndicatorValue(taapiData[d].result.valueMACDHist, "auto")
                ]);
            }
        }

        if(config.chart.repaintSkipCache || createNew) {            

            /** Add the actual data series */
            let seriesDefHistogramPositive = {}; //styles || {};

            seriesDefHistogramPositive.name = displayName_signal;
            seriesDefHistogramPositive.linkedTo = 'main';
            seriesDefHistogramPositive.type = 'column';
            seriesDefHistogramPositive.turboThreshold = 0;
            seriesDefHistogramPositive.lineWidth = 1;
            seriesDefHistogramPositive.color = "green";
            seriesDefHistogramPositive.data = positiveHistogramValues;
            seriesDefHistogramPositive.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefHistogramPositive.enableMouseTracking = false;
            seriesDefHistogramPositive.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesHistogramPositive = chart.addSeries(seriesDefHistogramPositive);
            
            indicatorStack_pushPlot(indicatorStackId, seriesHistogramPositive, "column", "histogramPositive");

            /** Add the actual data series */
            let seriesDefHistogramNegative = {}; //styles || {};

            seriesDefHistogramNegative.name = displayName_histogram;
            seriesDefHistogramNegative.linkedTo = 'main';
            seriesDefHistogramNegative.type = 'column';
            seriesDefHistogramNegative.turboThreshold = 0;
            seriesDefHistogramNegative.lineWidth = 1;
            seriesDefHistogramNegative.color = "red";
            seriesDefHistogramNegative.data = negativeHistogramValues;
            seriesDefHistogramNegative.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefHistogramNegative.enableMouseTracking = false;
            seriesDefHistogramNegative.dataGrouping = {
                //padding: 5,
                enabled: false,
            } 

            let seriesHistogramNegative = chart.addSeries(seriesDefHistogramNegative);
            
            indicatorStack_pushPlot(indicatorStackId, seriesHistogramNegative, "column", "histogramNegative");
        } else {

            let seriesHistogramPositive = series_getCached(indicatorStackId, "histogramPositive");

            for(let v in positiveHistogramValues) {
                seriesHistogramPositive.addPoint(positiveHistogramValues[v]);
            }

            let seriesHistogramNegative = series_getCached(indicatorStackId, "histogramNegative");

            for(let v in negativeHistogramValues) {
                seriesHistogramNegative.addPoint(negativeHistogramValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dm.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dm";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `Directional Movement (${parameters.period})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the Plus DM **************************************
        let plusDMValues = [];

        for(let d in taapiData) {
            plusDMValues.push({
                name: `
                    <span style="color:${styles.plusDm};">${roundIndicatorValue(taapiData[d].result.plus_dm, "auto")}</span> |
                    <span style="color:${styles.minusDm};">${roundIndicatorValue(taapiData[d].result.minus_dm, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.plus_dm, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefPlusDM = {}; //styles || {};

            seriesDefPlusDM.name = displayName;
            seriesDefPlusDM.linkedTo = 'main';
            seriesDefPlusDM.type = 'line';
            seriesDefPlusDM.turboThreshold = 0;
            seriesDefPlusDM.lineWidth = 1;
            seriesDefPlusDM.color = styles.plusDm;
            seriesDefPlusDM.data = plusDMValues;
            seriesDefPlusDM.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefPlusDM.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesPlusDM = chart.addSeries(seriesDefPlusDM);
            
            indicatorStack_pushPlot(indicatorStackId, seriesPlusDM, "line", "plusdm");
        } else {

            let seriesPlusDM = series_getCached(indicatorStackId, "plusdm");

            for(let v in plusDMValues) {
                seriesPlusDM.addPoint(plusDMValues[v]);
            }

        }

        // ************************************** Plot the Minus DM **************************************

        let minusDMValues = [];

        for(let d in taapiData) {
            minusDMValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.minus_dm, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefMinusDM = {}; //styles || {};

            seriesDefMinusDM.name = null;
            seriesDefMinusDM.linkedTo = 'main';
            seriesDefMinusDM.type = 'line';
            seriesDefMinusDM.turboThreshold = 0;
            seriesDefMinusDM.lineWidth = 1;
            seriesDefMinusDM.color = styles.minusDm;
            seriesDefMinusDM.data = minusDMValues;
            seriesDefMinusDM.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefMinusDM.enableMouseTracking = false;
            seriesDefMinusDM.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesMinusDM = chart.addSeries(seriesDefMinusDM);
            
            indicatorStack_pushPlot(indicatorStackId, seriesMinusDM, "line", "minusdm");
        } else {

            let seriesMinusDM = series_getCached(indicatorStackId, "minusdm");

            for(let v in minusDMValues) {
                seriesMinusDM.addPoint(minusDMValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.di.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "di";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinitions.di.shortName} (${parameters.period})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the Plus DI **************************************
        let plusDiValues = [];

        for(let d in taapiData) {
            plusDiValues.push({
                name: `
                    <span style="color:${styles.plusDi};">${roundIndicatorValue(taapiData[d].result.plus_di, "auto")}</span> |
                    <span style="color:${styles.minusDi};">${roundIndicatorValue(taapiData[d].result.minus_di, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.plus_di, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefPlusDi = {}; //styles || {};

            seriesDefPlusDi.name = displayName;
            seriesDefPlusDi.linkedTo = 'main';
            seriesDefPlusDi.type = 'line';
            seriesDefPlusDi.turboThreshold = 0;
            seriesDefPlusDi.lineWidth = 1;
            seriesDefPlusDi.color = styles.plusDi;
            seriesDefPlusDi.data = plusDiValues;
            seriesDefPlusDi.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefPlusDi.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesPlusDi = chart.addSeries(seriesDefPlusDi);
            
            indicatorStack_pushPlot(indicatorStackId, seriesPlusDi, "line", "plusdi");
        } else {

            let seriesPlusDi = series_getCached(indicatorStackId, "plusdi");

            for(let v in plusDiValues) {
                seriesPlusDi.addPoint(plusDiValues[v]);
            }

        }

        // ************************************** Plot the Minus DI **************************************

        let minusDiValues = [];

        for(let d in taapiData) {
            minusDiValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.minus_di, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefMinusDi = {}; //styles || {};

            seriesDefMinusDi.name = null;
            seriesDefMinusDi.linkedTo = 'main';
            seriesDefMinusDi.type = 'line';
            seriesDefMinusDi.turboThreshold = 0;
            seriesDefMinusDi.lineWidth = 1;
            seriesDefMinusDi.color = styles.minusDi;
            seriesDefMinusDi.data = minusDiValues;
            seriesDefMinusDi.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefMinusDi.enableMouseTracking = false;
            seriesDefMinusDi.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesMinusDi = chart.addSeries(seriesDefMinusDi);
            
            indicatorStack_pushPlot(indicatorStackId, seriesMinusDi, "line", "minusdi");
        } else {

            let seriesMinusDi = series_getCached(indicatorStackId, "minusdi");

            for(let v in minusDiValues) {
                seriesMinusDi.addPoint(minusDiValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dmi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dmi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `DMI (${parameters.period})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the Plus DM **************************************
        let plusDIValues = [];

        for(let d in taapiData) {
            plusDIValues.push({
                name: `
                    <span style="color:${styles.adx};">${roundIndicatorValue(taapiData[d].result.adx, "auto")}</span> |
                    <span style="color:${styles.plusDI};">${roundIndicatorValue(taapiData[d].result.plusdi, "auto")}</span> |
                    <span style="color:${styles.minusDI};">${roundIndicatorValue(taapiData[d].result.minusdi, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.plusdi, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefPlusDI = {}; //styles || {};

            seriesDefPlusDI.name = displayName;
            seriesDefPlusDI.linkedTo = 'main';
            seriesDefPlusDI.type = 'line';
            seriesDefPlusDI.turboThreshold = 0;
            seriesDefPlusDI.lineWidth = 1;
            seriesDefPlusDI.color = styles.plusDI;
            seriesDefPlusDI.data = plusDIValues;
            seriesDefPlusDI.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefPlusDI.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesPlusDI = chart.addSeries(seriesDefPlusDI);
            
            indicatorStack_pushPlot(indicatorStackId, seriesPlusDI, "line", "plusDI");
        } else {

            let seriesPlusDI = series_getCached(indicatorStackId, "plusDI");

            for(let v in plusDIValues) {
                seriesPlusDI.addPoint(plusDIValues[v]);
            }

        }

        // ************************************** Plot the Minus DM **************************************

        let minusDIValues = [];

        for(let d in taapiData) {
            minusDIValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.minusdi, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefMinusDI = {}; //styles || {};

            seriesDefMinusDI.name = null;
            seriesDefMinusDI.linkedTo = 'main';
            seriesDefMinusDI.type = 'line';
            seriesDefMinusDI.turboThreshold = 0;
            seriesDefMinusDI.lineWidth = 1;
            seriesDefMinusDI.color = styles.minusDI;
            seriesDefMinusDI.data = minusDIValues;
            seriesDefMinusDI.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefMinusDI.enableMouseTracking = false;
            seriesDefMinusDI.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesMinusDI = chart.addSeries(seriesDefMinusDI);
            
            indicatorStack_pushPlot(indicatorStackId, seriesMinusDI, "line", "minusDI");
        } else {

            let seriesMinusDI = series_getCached(indicatorStackId, "minusDI");

            for(let v in minusDIValues) {
                seriesminusDI.addPoint(seriesMinusDI[v]);
            }

        }
        // ************************************** Plot the ADX **************************************

        let adxValues = [];

        for(let d in taapiData) {
            adxValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.adx, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefAdx = {}; //styles || {};

            seriesDefAdx.name = null;
            seriesDefAdx.linkedTo = 'main';
            seriesDefAdx.type = 'line';
            seriesDefAdx.turboThreshold = 0;
            seriesDefAdx.lineWidth = 1;
            seriesDefAdx.color = styles.adx;
            seriesDefAdx.data = adxValues;
            seriesDefAdx.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefAdx.enableMouseTracking = false;
            seriesDefAdx.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesAdx = chart.addSeries(seriesDefAdx);
            
            indicatorStack_pushPlot(indicatorStackId, seriesAdx, "line", "adx");
        } else {

            let seriesAdx = series_getCached(indicatorStackId, "adx");

            for(let v in adxValues) {
                seriesAdx.addPoint(adxValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.msw.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "msw";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} (${parameters.period})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the Sine **************************************
        let sineValues = [];
        let leadValues = [];

        for(let d in taapiData) {
            sineValues.push({
                name: `
                    <span style="color:${styles.msw_sine};">${roundIndicatorValue(taapiData[d].result.msw_sine, "auto")}</span> |
                    <span style="color:${styles.msw_lead};">${roundIndicatorValue(taapiData[d].result.msw_lead, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.msw_sine, "auto")
            });

            leadValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.msw_lead, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefSine = {}; //styles || {};

            seriesDefSine.name = displayName;
            seriesDefSine.linkedTo = 'main';
            seriesDefSine.type = 'line';
            seriesDefSine.turboThreshold = 0;
            seriesDefSine.lineWidth = 1;
            seriesDefSine.color = styles.msw_sine;
            seriesDefSine.data = sineValues;
            seriesDefSine.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefSine.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesSine = chart.addSeries(seriesDefSine);
            
            indicatorStack_pushPlot(indicatorStackId, seriesSine, "line", "sine");
        } else {

            let seriesSine = series_getCached(indicatorStackId, "sine");

            for(let v in sineValues) {
                seriesSine.addPoint(sineValues[v]);
            }

        }

        // ************************************** Plot the Lead **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefLead = {}; //styles || {};

            seriesDefLead.name = null;
            seriesDefLead.linkedTo = 'main';
            seriesDefLead.type = 'line';
            seriesDefLead.turboThreshold = 0;
            seriesDefLead.lineWidth = 1;
            seriesDefLead.color = styles.msw_lead;
            seriesDefLead.data = leadValues;
            seriesDefLead.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefLead.enableMouseTracking = false;
            seriesDefLead.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesLead = chart.addSeries(seriesDefLead);
            
            indicatorStack_pushPlot(indicatorStackId, seriesLead, "line", "lead");
        } else {

            let seriesLead = series_getCached(indicatorStackId, "lead");

            for(let v in leadValues) {
                seriesLead.addPoint(seriesLead[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.stoch.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "stoch";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} (${parameters.kPeriod}, ${parameters.dPeriod}, ${parameters.kSmooth})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the K **************************************
        let kValues = [];
        let dValues = [];

        for(let d in taapiData) {
            kValues.push({
                name: `
                    <span style="color:${styles.valueK};">${roundIndicatorValue(taapiData[d].result.valueK, "auto")}</span> |
                    <span style="color:${styles.valueD};">${roundIndicatorValue(taapiData[d].result.valueD, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueK, "auto")
            });

            dValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueD, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefK = {}; //styles || {};

            seriesDefK.name = displayName;
            seriesDefK.linkedTo = 'main';
            seriesDefK.type = 'line';
            seriesDefK.turboThreshold = 0;
            seriesDefK.softThreshold = false;
            seriesDefK.lineWidth = 1;
            seriesDefK.color = styles.valueK;
            seriesDefK.data = kValues;
            seriesDefK.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefK.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesK = chart.addSeries(seriesDefK);
            
            indicatorStack_pushPlot(indicatorStackId, seriesK, "line", "k");
        } else {

            let seriesK = series_getCached(indicatorStackId, "k");

            for(let v in kValues) {
                seriesK.addPoint(kValues[v]);
            }

        }

        // ************************************** Plot the D **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefD = {}; //styles || {};

            seriesDefD.name = null;
            seriesDefD.linkedTo = 'main';
            seriesDefD.type = 'line';
            seriesDefD.turboThreshold = 0;
            seriesDefD.softThreshold = false;
            seriesDefD.lineWidth = 1;
            seriesDefD.color = styles.valueD;
            seriesDefD.data = dValues;
            seriesDefD.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefD.enableMouseTracking = false;
            seriesDefD.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesD = chart.addSeries(seriesDefD);
            
            indicatorStack_pushPlot(indicatorStackId, seriesD, "line", "d");
        } else {

            let seriesD = series_getCached(indicatorStackId, "d");

            for(let v in dValues) {
                seriesD.addPoint(dValues[v]);
            }

        }
        
        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.stochrsi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "stochrsi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} (${parameters.kPeriod}, ${parameters.dPeriod}, ${parameters.rsiPeriod}, , ${parameters.stochasticPeriod})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the K **************************************
        let kValues = [];
        let dValues = [];

        for(let d in taapiData) {
            if(taapiData[d].result && taapiData[d].result.value) {
                
                kValues.push({
                    name: `
                        <span style="color:${styles.valueK};">${roundIndicatorValue(taapiData[d].result.value.valueK || 0, "auto")}</span> |
                        <span style="color:${styles.valueD};">${roundIndicatorValue(taapiData[d].result.value.valueD || 0, "auto")}</span>
                        `,
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].result.value.valueK, "auto")
                });

                dValues.push([
                    taapiData[d].timestamp, 
                    roundIndicatorValue(taapiData[d].result.value.valueD, "auto")
                ]);
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefK = {}; //styles || {};

            seriesDefK.name = displayName;
            seriesDefK.linkedTo = 'main';
            seriesDefK.type = 'line';
            seriesDefK.turboThreshold = 0;
            seriesDefK.softThreshold = false;
            seriesDefK.lineWidth = 1;
            seriesDefK.color = styles.valueK;
            seriesDefK.data = kValues;
            seriesDefK.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefK.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesK = chart.addSeries(seriesDefK);
            
            indicatorStack_pushPlot(indicatorStackId, seriesK, "line", "k");
        } else {

            let seriesK = series_getCached(indicatorStackId, "k");

            for(let v in kValues) {
                seriesK.addPoint(kValues[v]);
            }

        }

        // ************************************** Plot the D **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefD = {}; //styles || {};

            seriesDefD.name = null;
            seriesDefD.linkedTo = 'main';
            seriesDefD.type = 'line';
            seriesDefD.turboThreshold = 0;
            seriesDefD.softThreshold = false;
            seriesDefD.lineWidth = 1;
            seriesDefD.color = styles.valueD;
            seriesDefD.data = dValues;
            seriesDefD.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefD.enableMouseTracking = false;
            seriesDefD.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesD = chart.addSeries(seriesDefD);
            
            indicatorStack_pushPlot(indicatorStackId, seriesD, "line", "d");
        } else {

            let seriesD = series_getCached(indicatorStackId, "d");

            for(let v in dValues) {
                seriesD.addPoint(dValues[v]);
            }

        }
        
        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.stochfast.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "stochfast";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} (${parameters.optInFastK_Period}, ${parameters.optInFastD_Period})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the K **************************************
        let kValues = [];
        let dValues = [];

        for(let d in taapiData) {
                
            kValues.push({
                name: `
                    <span style="color:${styles.valueK};">${roundIndicatorValue(taapiData[d].result.valueFastK || 0, "auto")}</span> |
                    <span style="color:${styles.valueD};">${roundIndicatorValue(taapiData[d].result.valueFastD || 0, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueFastK, "auto")
            });

            dValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueFastD, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefK = {}; //styles || {};

            seriesDefK.name = displayName;
            seriesDefK.linkedTo = 'main';
            seriesDefK.type = 'line';
            seriesDefK.turboThreshold = 0;
            seriesDefK.softThreshold = false;
            seriesDefK.lineWidth = 1;
            seriesDefK.color = styles.valueK;
            seriesDefK.data = kValues;
            seriesDefK.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefK.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesK = chart.addSeries(seriesDefK);
            
            indicatorStack_pushPlot(indicatorStackId, seriesK, "line", "k");
        } else {

            let seriesK = series_getCached(indicatorStackId, "k");

            for(let v in kValues) {
                seriesK.addPoint(kValues[v]);
            }

        }

        // ************************************** Plot the D **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefD = {}; //styles || {};

            seriesDefD.name = null;
            seriesDefD.linkedTo = 'main';
            seriesDefD.type = 'line';
            seriesDefD.turboThreshold = 0;
            seriesDefD.softThreshold = false;
            seriesDefD.lineWidth = 1;
            seriesDefD.color = styles.valueD;
            seriesDefD.data = dValues;
            seriesDefD.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefD.enableMouseTracking = false;
            seriesDefD.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesD = chart.addSeries(seriesDefD);
            
            indicatorStack_pushPlot(indicatorStackId, seriesD, "line", "d");
        } else {

            let seriesD = series_getCached(indicatorStackId, "d");

            for(let v in dValues) {
                seriesD.addPoint(dValues[v]);
            }

        }
        
        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.midpoint.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "midpoint";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.midprice.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "midprice";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.vidya.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "vidya";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.short_period} ${parameters.long_period} ${parameters.alpha}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.wilders.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "wilders";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.wclprice.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "wclprice";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.pvi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "pvi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.nvi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "nvi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.apo.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "apo";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ppo.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ppo";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dpo.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dpo";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.beta.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "beta";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.mass.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "mass";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ht_trendline.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ht_trendline";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ht_trendmode.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ht_trendmode";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ht_sine.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ht_sine";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the Sine **************************************
        let sineValues = [];
        let leadValues = [];

        for(let d in taapiData) {
            sineValues.push({
                name: `
                    <span style="color:${styles.valueSine};">${roundIndicatorValue(taapiData[d].result.valueSine, "auto")}</span> |
                    <span style="color:${styles.valueLeadSine};">${roundIndicatorValue(taapiData[d].result.valueLeadSine, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueSine, "auto")
            });

            leadValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueLeadSine, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefSine = {}; //styles || {};

            seriesDefSine.name = displayName;
            seriesDefSine.linkedTo = 'main';
            seriesDefSine.type = 'line';
            seriesDefSine.turboThreshold = 0;
            seriesDefSine.lineWidth = 1;
            seriesDefSine.color = styles.valueLeadSine;
            seriesDefSine.data = sineValues;
            seriesDefSine.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefSine.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesSine = chart.addSeries(seriesDefSine);
            
            indicatorStack_pushPlot(indicatorStackId, seriesSine, "line", "sine");
        } else {

            let seriesSine = series_getCached(indicatorStackId, "sine");

            for(let v in sineValues) {
                seriesSine.addPoint(sineValues[v]);
            }

        }

        // ************************************** Plot the Lead **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefLead = {}; //styles || {};

            seriesDefLead.name = null;
            seriesDefLead.linkedTo = 'main';
            seriesDefLead.type = 'line';
            seriesDefLead.turboThreshold = 0;
            seriesDefLead.lineWidth = 1;
            seriesDefLead.color = styles.msw_lead;
            seriesDefLead.data = leadValues;
            seriesDefLead.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefLead.enableMouseTracking = false;
            seriesDefLead.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesLead = chart.addSeries(seriesDefLead);
            
            indicatorStack_pushPlot(indicatorStackId, seriesLead, "line", "lead");
        } else {

            let seriesLead = series_getCached(indicatorStackId, "lead");

            for(let v in leadValues) {
                seriesLead.addPoint(seriesLead[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ht_phasor.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ht_phasor";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the InPhase **************************************
        let inPhaseValues = [];
        let quadratureValues = [];

        for(let d in taapiData) {
            inPhaseValues.push({
                name: `
                    <span style="color:${styles.valueInPhase};">${roundIndicatorValue(taapiData[d].result.valueInPhase, "auto")}</span> |
                    <span style="color:${styles.valueQuadrature};">${roundIndicatorValue(taapiData[d].result.valueQuadrature, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueInPhase, "auto")
            });

            quadratureValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueQuadrature, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefInPhase = {}; //styles || {};

            seriesDefInPhase.name = displayName;
            seriesDefInPhase.linkedTo = 'main';
            seriesDefInPhase.type = 'line';
            seriesDefInPhase.turboThreshold = 0;
            seriesDefInPhase.lineWidth = 1;
            seriesDefInPhase.color = styles.valueInPhase;
            seriesDefInPhase.data = inPhaseValues;
            seriesDefInPhase.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefInPhase.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesInPhase = chart.addSeries(seriesDefInPhase);
            
            indicatorStack_pushPlot(indicatorStackId, seriesInPhase, "line", "inPhase");
        } else {

            let seriesInPhase = series_getCached(indicatorStackId, "inPhase");

            for(let v in inPhaseValues) {
                seriesInPhase.addPoint(inPhaseValues[v]);
            }

        }

        // ************************************** Plot the Quadrature **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefQuadrature = {}; //styles || {};

            seriesDefQuadrature.name = null;
            seriesDefQuadrature.linkedTo = 'main';
            seriesDefQuadrature.type = 'line';
            seriesDefQuadrature.turboThreshold = 0;
            seriesDefQuadrature.lineWidth = 1;
            seriesDefQuadrature.color = styles.valueQuadrature;
            seriesDefQuadrature.data = quadratureValues;
            seriesDefQuadrature.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefQuadrature.enableMouseTracking = false;
            seriesDefQuadrature.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesQuadrature = chart.addSeries(seriesDefQuadrature);
            
            indicatorStack_pushPlot(indicatorStackId, seriesQuadrature, "line", "quadrature");
        } else {

            let seriesQuadrature = series_getCached(indicatorStackId, "quadrature");

            for(let v in quadratureValues) {
                seriesQuadrature.addPoint(quadratureValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ht_dcphase.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ht_dcphase";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ht_dcperiod.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ht_dcperiod";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.linearreg.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "linearreg";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.linearreg_intercept.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "linearreg_intercept";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.fisher.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "fisher";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} (${parameters.period})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the Fisher **************************************
        let fisherValues = [];
        let fisherSignalValues = [];

        for(let d in taapiData) {
            fisherValues.push({
                name: `
                    <span style="color:${styles.fisher};">${roundIndicatorValue(taapiData[d].result.fisher, "auto")}</span> |
                    <span style="color:${styles.fisher_signal};">${roundIndicatorValue(taapiData[d].result.fisher_signal, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.fisher, "auto")
            });

            fisherSignalValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.fisher_signal, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefFisher = {}; //styles || {};

            seriesDefFisher.name = displayName;
            seriesDefFisher.linkedTo = 'main';
            seriesDefFisher.type = 'line';
            seriesDefFisher.turboThreshold = 0;
            seriesDefFisher.lineWidth = 1;
            seriesDefFisher.color = styles.fisher;
            seriesDefFisher.data = fisherValues;
            seriesDefFisher.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefFisher.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesFisher = chart.addSeries(seriesDefFisher);
            
            indicatorStack_pushPlot(indicatorStackId, seriesFisher, "line", "fisher");
        } else {

            let seriesFisher = series_getCached(indicatorStackId, "fisher");

            for(let v in fisherValues) {
                seriesFisher.addPoint(fisherValues[v]);
            }

        }

        // ************************************** Plot the FisherSignal **************************************

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefFisherSignal = {}; //styles || {};

            seriesDefFisherSignal.name = null;
            seriesDefFisherSignal.linkedTo = 'main';
            seriesDefFisherSignal.type = 'line';
            seriesDefFisherSignal.turboThreshold = 0;
            seriesDefFisherSignal.lineWidth = 1;
            seriesDefFisherSignal.color = styles.fisher_signal;
            seriesDefFisherSignal.data = fisherSignalValues;
            seriesDefFisherSignal.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefFisherSignal.enableMouseTracking = false;
            seriesDefFisherSignal.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesFisherSignal = chart.addSeries(seriesDefFisherSignal);
            
            indicatorStack_pushPlot(indicatorStackId, seriesFisherSignal, "line", "fisherSignal");
        } else {

            let seriesFisherSignal = series_getCached(indicatorStackId, "fisherSignal");

            for(let v in fisherSignalValues) {
                seriesFisherSignal.addPoint(seriesFisherSignal[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.correl.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "correl";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.kvo.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "kvo";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.linearreg_slope.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "linearreg_slope";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.linearreg_angle.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "linearreg_angle";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot **************************************
        let values = [];

        for(let d in taapiData) {

            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = {}; //styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            //seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.color = styles.color;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "bar", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.adx.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "adx";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} (${parameters.optInTimePeriod})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.supertrend.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "supertrend";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period} ${parameters.multiplier}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */

        let seriesDataBullish = [];
        let seriesDataBearish = [];

        let values = [];
        let zones = [];
        /* valuesBullish = [];
        valuesBearish = []; */

        let currentValueAdvice = null;
        let currentSeriesData = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            let pointData = taapiData[d];
            let valueAdvice = pointData.result.valueAdvice;

            if(currentValueAdvice != valueAdvice) {
                

                if(currentSeriesData.length > 0) {
                    if(currentValueAdvice === "long") {
                        seriesDataBullish.push(currentSeriesData);
                    } else {
                        seriesDataBearish.push(currentSeriesData);
                    }
                }

                currentValueAdvice = valueAdvice;
                currentSeriesData = [];
            }


            currentSeriesData.push({
                name: `
                    <span style="color:${valueAdvice === "long" ? styles.colorlong : styles.colorshort};">${roundIndicatorValue(pointData.result.value, "auto")}</span>
                    `,
                color: valueAdvice === "long" ? styles.colorlong : styles.colorshort,
                x: pointData.timestamp, 
                y: roundIndicatorValue(pointData.result.value, "auto")
            });

            /* if(taapiData[d].result.valueAdvice === "long"){
                valuesBullish.push({
                    name: `
                        <span style="color:${styles.colorlong};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                        `,
                    //color: styles.colorlong,
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].result.value, "auto")
                });
            } else {
                valuesBearish.push({
                    name: `
                        <span style="color:${styles.colorshort};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                        `,
                    
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].result.value, "auto")
                });
            } */
        }

        if(currentSeriesData.length > 0) {
            if(currentValueAdvice === "long") {
                seriesDataBullish.push(currentSeriesData);
            } else {
                seriesDataBearish.push(currentSeriesData);
            }
        }

        for(let seriesDataBullishKey in seriesDataBullish) {

            let seriesDef = {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.color = styles.colorlong;
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = seriesDataBullish[seriesDataBullishKey];
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", `bullish_${seriesDataBullishKey}`);
        }

        for(let seriesDataBearishKey in seriesDataBearish) {

            let seriesDef = {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.color = styles.colorshort;
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = seriesDataBearish[seriesDataBearishKey];
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", `bearish_${seriesDataBearishKey}`);
        }

        /* if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'supertrend';
            seriesDef.color = styles.colorshort;
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main"); */

            /* let seriesBullishDef = {};

            seriesBullishDef.name = displayName;
            seriesBullishDef.linkedTo = 'bullish';
            seriesBullishDef.type = 'line';
            seriesBullishDef.color = styles.colorlong;
            seriesBullishDef.turboThreshold = 0;
            seriesBullishDef.lineWidth = 1;
            seriesBullishDef.data = valuesBullish;
            seriesBullishDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesBullishDef.dataGrouping = {
                enabled: false,
            }

            let seriesBullish = chart.addSeries(seriesBullishDef);

            indicatorStack_pushPlot(indicatorStackId, seriesBullish, "line", "bullish");

            let seriesBearishDef = {};

            seriesBearishDef.name = displayName;
            seriesBearishDef.linkedTo = 'main';
            seriesBearishDef.type = 'line';
            seriesBearishDef.color = styles.colorshort;
            seriesBearishDef.turboThreshold = 0;
            seriesBearishDef.lineWidth = 1;
            seriesBearishDef.data = valuesBearish;
            seriesBearishDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesBearishDef.dataGrouping = {
                enabled: false,
            }

            let seriesBearish = chart.addSeries(seriesBearishDef);

            indicatorStack_pushPlot(indicatorStackId, seriesBearish, "line", "bearish"); */
        /* } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            } */

            /* let seriesBullish = series_getCached(indicatorStackId, "bullish");

            for(let v in valuesBullish) {
                seriesBullish.addPoint(valuesBullish[v]);
            }

            let seriesBearish = series_getCached(indicatorStackId, "bearish");

            for(let v in valuesBearish) {
                seriesBearish.addPoint(valuesBearish[v]);
            } */

        //}
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.chop.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "chop";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);

        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.qstick.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "qstick";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.log10.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "log10";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.marketfi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "marketfi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: taapiData[d].result.value, //roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'bar';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.cmo.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "cmo";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.willr.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "willr";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.coppockcurve.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "coppockcurve";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.wmaLength}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.aroon.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "aroon";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `Aroon (${parameters.optInTimePeriod})`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the DOWN **************************************
        let downValues = [];
        let upValues = [];

        for(let d in taapiData) {
            downValues.push({
                name: `
                    <span style="color:${styles.valueAroonDown};">${roundIndicatorValue(taapiData[d].result.valueAroonDown, "auto")}%</span> |
                    <span style="color:${styles.valueAroonUp};">${roundIndicatorValue(taapiData[d].result.valueAroonUp, "auto")}%</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.valueAroonDown, "auto")
            });

            upValues.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.valueAroonUp, "auto")
            ]);
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefDown = {}; //styles || {};

            seriesDefDown.name = displayName;
            seriesDefDown.linkedTo = 'main';
            seriesDefDown.type = 'line';
            seriesDefDown.turboThreshold = 0;
            //seriesDefDown.softThreshold = false;
            seriesDefDown.lineWidth = 1;
            seriesDefDown.color = styles.valueAroonDown;
            seriesDefDown.data = downValues;
            seriesDefDown.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefDown.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesDown = chart.addSeries(seriesDefDown);
            
            indicatorStack_pushPlot(indicatorStackId, seriesDown, "line", "down");
        } else {

            let seriesDown = series_getCached(indicatorStackId, "down");

            for(let v in downValues) {
                seriesDown.addPoint(downValues[v]);
            }

        }

        // ************************************** Plot the UP **************************************

        /* let upValues = [];

        for(let d in taapiData) {
            
        } */

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDefUp = {}; //styles || {};

            seriesDefUp.name = null;
            seriesDefUp.linkedTo = 'main';
            seriesDefUp.type = 'line';
            seriesDefUp.turboThreshold = 0;
            //seriesDefUp.softThreshold = false;
            seriesDefUp.lineWidth = 1;
            seriesDefUp.color = styles.valueAroonUp;
            seriesDefUp.data = upValues;
            seriesDefUp.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefUp.enableMouseTracking = false;
            seriesDefUp.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesUp = chart.addSeries(seriesDefUp);
            
            indicatorStack_pushPlot(indicatorStackId, seriesUp, "line", "up");
        } else {

            let seriesUp = series_getCached(indicatorStackId, "up");

            for(let v in upValues) {
                seriesUp.addPoint(upValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ao.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ao";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        // ************************************** Plot the DOWN **************************************
        let downValues = [];
        let upValues = [];

        let lastValue = 0;

        for(let d in taapiData) {

            if(taapiData[d].result.value >= lastValue) {
                upValues.push({
                    name: `
                        <span style="color:${styles.valueUp};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                        `,
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].result.value, "auto")
                });
            } else {                
                downValues.push({
                    name: `
                        <span style="color:${styles.valueDown};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                        `,
                    x: taapiData[d].timestamp, 
                    y: roundIndicatorValue(taapiData[d].result.value, "auto")
                });
            }

            lastValue = taapiData[d].result.value;
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDefDown = {}; //styles || {};

            seriesDefDown.name = displayName;
            seriesDefDown.linkedTo = 'main';
            seriesDefDown.type = 'bar';
            seriesDefDown.turboThreshold = 0;
            //seriesDefDown.softThreshold = false;
            seriesDefDown.lineWidth = 1;
            seriesDefDown.color = styles.valueDown;
            seriesDefDown.data = downValues;
            seriesDefDown.yAxis = indicatorDefinition.draw.yAxis;
            seriesDefDown.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesDown = chart.addSeries(seriesDefDown);
            
            indicatorStack_pushPlot(indicatorStackId, seriesDown, "bar", "down");
        } else {

            let seriesDown = series_getCached(indicatorStackId, "down");

            for(let v in downValues) {
                seriesDown.addPoint(downValues[v]);
            }

        }

        // ************************************** Plot the UP **************************************

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDefUp = {}; //styles || {};

            seriesDefUp.name = displayName;
            seriesDefUp.linkedTo = 'main';
            seriesDefUp.type = 'bar';
            seriesDefUp.turboThreshold = 0;
            //seriesDefUp.softThreshold = false;
            seriesDefUp.lineWidth = 1;
            seriesDefUp.color = styles.valueUp;
            seriesDefUp.data = upValues;
            seriesDefUp.yAxis = indicatorDefinition.draw.yAxis;
            //seriesDefUp.enableMouseTracking = false;
            seriesDefUp.dataGrouping = {
                //padding: 5,
                enabled: false,
            }

            let seriesUp = chart.addSeries(seriesDefUp);
            
            indicatorStack_pushPlot(indicatorStackId, seriesUp, "bar", "up");
        } else {

            let seriesUp = series_getCached(indicatorStackId, "up");

            for(let v in upValues) {
                seriesUp.addPoint(upValues[v]);
            }

        }

        // ************************************** Show the Indicator **************************************

        if(config.chart.repaintSkipCache || createNew) {
            yAxis_show(indicator);
        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.bop.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "bop";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.softThreshold = false;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dx.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dx";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.minus_di.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "minus_di";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.plus_di.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "plus_di";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.minus_dm.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "minus_dm";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.plus_dm.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "plus_dm";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.roc.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "roc";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.rocp.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "rocp";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.rocr.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "rocr";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.rocr100.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "rocr100";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ad.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ad";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.adosc.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "adosc";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.longName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.cmf.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "cmf";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.period}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                low: 0,
                high: roundIndicatorValue(taapiData[d].result.value, "auto"),
            });
        }

        if(true || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            //seriesDef.type = 'line';
            seriesDef.type = 'arearange';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.cvi.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "cvi";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.longName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.vwap.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "vwap";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.anchorPeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {
            /* values.push([
                taapiData[d].timestamp, 
                roundIndicatorValue(taapiData[d].result.value, "auto"),
            ]); */
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["2crows"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "2crows";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["3blackcrows"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "3blackcrows";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["3inside"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "3inside";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["3linestrike"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "3linestrike";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["3outside"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "3outside";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["3starsinsouth"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "3starsinsouth";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions["3whitesoldiers"].draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "3whitesoldiers";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.abandonedbaby.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "abandonedbaby";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.advanceblock.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "advanceblock";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.belthold.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "belthold";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.breakaway.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "breakaway";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.closingmarubozu.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "closingmarubozu";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                        title: `${taapiData[d].result.value < 0 ? "Bearish " : ""}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.concealbabyswall.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "concealbabyswall";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.counterattack.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "counterattack";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.darkcloudcover.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "darkcloudcover";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.doji.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "doji";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    y: taapiData[d].prices.close * 1.3
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.y = -100;
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            //seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dojimorningstar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dojimorningstar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dojistar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dojistar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.dragonflydoji.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "dragonflydoji";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.engulfing.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "engulfing";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.eveningdojistar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "eveningdojistar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.eveningstar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "eveningstar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.gapsidesidewhite.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "gapsidesidewhite";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.gravestonedoji.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "gravestonedoji";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.hammer.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "hammer";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.hangingman.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "hangingman";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.harami.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "harami";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.haramicross.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "haramicross";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.highwave.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "highwave";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.hikkake.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "hikkake";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.hikkakemod.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "hikkakemod";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.homingpigeon.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "homingpigeon";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.identical3crows.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "identical3crows";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.inneck.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "inneck";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.invertedhammer.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "invertedhammer";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.kicking.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "kicking";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.ladderbottom.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "ladderbottom";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.longleggeddoji.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "longleggeddoji";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.longline.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "longline";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.marubozu.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "marubozu";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : ""}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.matchinglow.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "matchinglow";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.mathold.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "mathold";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.morningstar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "morningstar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.onneck.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "onneck";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.piercing.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "piercing";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.rickshawman.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "rickshawman";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.risefall3methods.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "risefall3methods";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.separatinglines.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "separatinglines";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.shootingstar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "shootingstar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.shortline.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "shortline";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.spinningtop.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "spinningtop";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.stalledpattern.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "stalledpattern";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.sticksandwich.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "sticksandwich";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.takuri.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "takuri";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.tasukigap.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "tasukigap";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.thrusting.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "thrusting";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.tristar.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "tristar";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.unique3river.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "unique3river";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.upsidegap2crows.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "upsidegap2crows";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.xsidegap3methods.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "xsidegap3methods";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${taapiData[d].result.value < 0 ? "Bearish " : "Bullish "}${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    //y: taapiData[d].prices.close * 1.1
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.y = -100;
            seriesDef.shape = "squarepin";
            //seriesDef.shape = "url(/images/patterns/hammer)";
            seriesDef.allowOverlapX = true;
            seriesDef.turboThreshold = 0;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "flag", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.natr.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "natr";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName} ${parameters.optInTimePeriod}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        values = [];
    
        for(let d in taapiData) {
            values.push({
                name: `
                    <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                    `,
                x: taapiData[d].timestamp, 
                y: roundIndicatorValue(taapiData[d].result.value, "auto")
            });
        }

        if(config.chart.repaintSkipCache || createNew) {

            /** Add the actual data series */
            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'line';
            seriesDef.turboThreshold = 0;
            seriesDef.lineWidth = 1;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;
            seriesDef.dataGrouping = {
                enabled: false,
            }

            let series = chart.addSeries(seriesDef);
            
            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");

            yAxis_show(indicator);
            
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
}/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.priorswinghigh.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "priorswinghigh";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    //parameters.backtracks = 1;

    // Fetch the indicator data points
    getTaapiIndicatorValues(candles, indicatorDefinition.taapiName, parameters).then(taapiData => {

        /* ****************************** Plot the line ****************************** */
        values = [];
    
        // Arrange data received from TAAPI.IO
        for(let d in taapiData) {

            if(taapiData[d].result.value !== 0) {
                values.push({
                    /* name: `
                        <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].prices.close, "auto")} (${roundIndicatorValue(taapiData[d].result.value, "auto")}% Match)</span>
                        `, */
                    title: `${indicatorDefinition.shortName}`,
                    x: taapiData[d].timestamp, 
                    y: taapiData[d].prices.high
                });
            }
        }

        if(config.chart.repaintSkipCache || createNew) {

            let seriesDef = styles || {};

            seriesDef.name = displayName;
            seriesDef.linkedTo = 'main';
            seriesDef.type = 'flags';
            seriesDef.onSeries = 'main';
            seriesDef.shape = "squarepin";
            //seriesDef.allowOverlapX = true;
            seriesDef.data = values;
            seriesDef.yAxis = indicatorDefinition.draw.yAxis;

            let series = chart.addSeries(seriesDef);

            indicatorStack_pushPlot(indicatorStackId, series, "line", "main");
        } else {

            let series = series_getCached(indicatorStackId, "main");

            for(let v in values) {
                series.addPoint(values[v]);
            }

        }
    });
};/**
 * This is the implementation which paints the plots on the highcharts graph.
 * 
 * Parameters
 * 
 * - candles: The candles that are used to generate the data points to be 
 * plotted. Note the candle count does not match the plot points count 
 * returned by getTaapiIndicatorValues, as any single point most often 
 * requires a candles history in order to be calculated (SMA200 for instance)
 * 
 * - parameters: Fixed and user variable parameters needed to calculate 
 * indicator values with TAAPI.IO
 * 
 * - styles: Fixed and user variable style parameters needed to style 
 * the plots on the graph
 * 
 * - indicatorStackId: Optional id of an existing plotted indicator. 
 * If this is given (when lazy loading for instance), new data points 
 * will be added to the existing series, instead of a new series being 
 * created and added to the chart.
 */
indicatorDefinitions.fibonacciretracement.draw.render = (candles, parameters, styles, indicatorStackId) => {

    let createNew = indicatorStackId ? false : true;

    let indicator = "fibonacciretracement";
    let indicatorDefinition = indicatorDefinitions[indicator];

    let displayName = `${indicatorDefinition.shortName}`;

    if(createNew) {
        indicatorStackId = indicatorStack_create(indicator, indicatorDefinition.draw.yAxis, displayName, parameters, styles); 
    }

    let lastCandle = candles[candles.length - 1];
    let lastCandleAt = lastCandle.timestamp * 1000;

    //parameters.backtracks = 1;

    // Fetch the indicator data points

    let construct = {
        "exchange": "-",
        "symbol": "-",
        "interval": "-",
        "indicators": [
            {
                "id": "retracement1",
                "indicator": "fibonacciretracement",
                "period": parameters.period,
                "retracement": parameters.retracement1,
                "trend": "smart"
            },
            {
                "id": "retracement2",
                "indicator": "fibonacciretracement",
                "period": parameters.period,
                "retracement": parameters.retracement2,
                "trend": "smart"
            },
            {
                "id": "retracement3",
                "indicator": "fibonacciretracement",
                "period": parameters.period,
                "retracement": parameters.retracement3,
                "trend": "smart"
            },
        ],
        "candles": candles
    };

    getTaapiBulkIndicatorValues(construct).then(taapiData => {

        let startAt = null;
        let endAt = null;
        
        let startPrice = null;
        let endPrice = null;
        
        let highPrice = null;
        let lowPrice = null;

        let retracement1 = null;
        let retracement2 = null;
        let retracement3 = null;

        for(let d in taapiData) {

            if(taapiData[d].id === "retracement1") {
                startAt = taapiData[d].result.startTimestamp * 1000;
                endAt = taapiData[d].result.endTimestamp * 1000;

                startPrice = taapiData[d].result.startPrice;
                endPrice = taapiData[d].result.endPrice;

                if(taapiData[d].result.trend.toLowerCase() === "uptrend") {
                    highPrice = taapiData[d].result.endPrice;
                    lowPrice = taapiData[d].result.startPrice;
                } else {
                    highPrice = taapiData[d].result.startPrice;
                    lowPrice = taapiData[d].result.endPrice;
                }

                retracement1 = taapiData[d].result.value;
            }

            if(taapiData[d].id === "retracement2") {
                retracement2 = taapiData[d].result.value;
            }

            if(taapiData[d].id === "retracement3") {
                retracement3 = taapiData[d].result.value;
            }
        }

        /* console.log("highPrice: ", highPrice);
        console.log("endPrice: ", endPrice);
        console.log("startAt: ", startAt);
        console.log("endAt: ", endAt);

        console.log("retracement1: ", retracement1);
        console.log("retracement2: ", retracement2);
        console.log("retracement3: ", retracement3); */

        // Plot span

        let seriesDef = styles || {};

        seriesDef.name = displayName;
        seriesDef.linkedTo = 'main';
        seriesDef.type = 'line';
        seriesDef.color = 'grey';
        seriesDef.dashStyle = "dash";
        seriesDef.enableMouseTracking = false;
        seriesDef.turboThreshold = 0;
        seriesDef.lineWidth = 1;
        seriesDef.fillOpacity = 0.5;
        seriesDef.data = [{
            name: `
                <span style="color:#93c47d;"><b>Start price</b>:${roundIndicatorValue(startPrice, "auto")}</b></span> |
                <span style="color:#93c47d;"><b>End price</b>:${roundIndicatorValue(endPrice, "auto")}</b></span> |
                <span style="color:#93c47d;"><b>${parameters.retracement1}</b>:${roundIndicatorValue(retracement1, "auto")}</span> |
                <span style="color:#6aa84f;"><b>${parameters.retracement2}</b>:${roundIndicatorValue(retracement2, "auto")}</span> |
                <span style="color:#38761d;"><b>${parameters.retracement3}</b>:${roundIndicatorValue(retracement3, "auto")}</span>
                `,
            x: startAt, 
            y: startPrice
        },{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: endAt, 
            y: endPrice
        }];
        seriesDef.yAxis = indicatorDefinition.draw.yAxis;
        seriesDef.dataGrouping = {
            enabled: false,
        }

        let series = chart.addSeries(seriesDef);

        indicatorStack_pushPlot(indicatorStackId, series, "line", "span");

        // Plot area 1 *********************************************************************************

        let seriesDefArea1 = styles || {};

        seriesDefArea1.name = null;
        seriesDefArea1.linkedTo = 'main';
        seriesDefArea1.type = 'arearange';
        seriesDefArea1.enableMouseTracking = false;
        seriesDefArea1.turboThreshold = 0;
        seriesDefArea1.color = "#93c47d";
        seriesDefArea1.lineWidth = 1;
        seriesDefArea1.fillOpacity = 0.1;
        seriesDefArea1.data = [{
            name: `<span>${parameters.retracement1}</span>`,
            x: startAt, 
            high: highPrice,
            low: retracement1,
        },{
            //name: ``,
            x: lastCandleAt, 
            high: highPrice,
            low: retracement1,
        }];
        /* seriesDefArea1.dataLabels = {
            enabled: true,
            y: -20,
            formatter: function() {
                return this.point.name || "";
            }
        }, */
        seriesDefArea1.yAxis = indicatorDefinition.draw.yAxis;
        seriesDefArea1.dataGrouping = {
            enabled: false,
        }

        let seriesArea1 = chart.addSeries(seriesDefArea1);

        indicatorStack_pushPlot(indicatorStackId, seriesArea1, "arearange", "area1");

        // Plot area 2 *********************************************************************************

        let seriesDefArea2 = styles || {};

        seriesDefArea2.name = null;
        seriesDefArea2.linkedTo = 'main';
        seriesDefArea2.type = 'arearange';
        seriesDefArea2.enableMouseTracking = false;
        seriesDefArea2.turboThreshold = 0;
        seriesDefArea2.color = "#6aa84f";
        seriesDefArea2.lineWidth = 1;
        seriesDefArea2.fillOpacity = 0.2;
        seriesDefArea2.data = [{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: startAt, 
            high: retracement1,
            low: retracement2,
        },{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: lastCandleAt, 
            high: retracement1,
            low: retracement2,
        }];
        seriesDefArea2.yAxis = indicatorDefinition.draw.yAxis;
        seriesDefArea2.dataGrouping = {
            enabled: false,
        }

        let seriesArea2 = chart.addSeries(seriesDefArea2);

        indicatorStack_pushPlot(indicatorStackId, seriesArea2, "arearange", "Area2");

        // Plot area 3 *********************************************************************************

        let seriesDefArea3 = styles || {};

        seriesDefArea3.name = null;
        seriesDefArea3.linkedTo = 'main';
        seriesDefArea3.type = 'arearange';
        seriesDefArea3.enableMouseTracking = false;
        seriesDefArea3.turboThreshold = 0;
        seriesDefArea3.color = "#38761d";
        seriesDefArea3.lineWidth = 1;
        seriesDefArea3.fillOpacity = 0.3;
        seriesDefArea3.data = [{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: startAt, 
            high: retracement2,
            low: retracement3,
        },{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: lastCandleAt, 
            high: retracement2,
            low: retracement3,
        }];
        seriesDefArea3.yAxis = indicatorDefinition.draw.yAxis;
        seriesDefArea3.dataGrouping = {
            enabled: false,
        }

        let seriesArea3 = chart.addSeries(seriesDefArea3);

        indicatorStack_pushPlot(indicatorStackId, seriesArea3, "arearange", "Area3");

        // Plot area 4 *********************************************************************************

        let seriesDefArea4 = styles || {};

        seriesDefArea4.name = null;
        seriesDefArea4.linkedTo = 'main';
        seriesDefArea4.type = 'arearange';
        seriesDefArea4.enableMouseTracking = false;
        seriesDefArea4.turboThreshold = 0;
        seriesDefArea4.color = "#cc0000";
        seriesDefArea4.lineWidth = 1;
        seriesDefArea4.fillOpacity = 0.3;
        seriesDefArea4.data = [{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: startAt, 
            high: retracement3,
            low: lowPrice,
        },{
            /* name: `
                <span style="color:${styles.color};">${roundIndicatorValue(taapiData[d].result.value, "auto")}</span>
                `, */
            x: lastCandleAt, 
            high: retracement3,
            low: lowPrice,
        }];
        seriesDefArea4.yAxis = indicatorDefinition.draw.yAxis;
        seriesDefArea4.dataGrouping = {
            enabled: false,
        }

        let seriesArea4 = chart.addSeries(seriesDefArea4);

        indicatorStack_pushPlot(indicatorStackId, seriesArea4, "arearange", "Area4");

        // Plot labels *********************************************************************************

        let seriesDefLabels = styles || {};

        seriesDefLabels.name = null;
        seriesDefLabels.linkedTo = 'main';
        seriesDefLabels.type = 'line';
        seriesDefLabels.color = 'grey';
        seriesDefLabels.enableMouseTracking = false;
        seriesDefLabels.turboThreshold = 0;
        seriesDefLabels.lineWidth = 0;
        seriesDefLabels.fillOpacity = 0.5;
        seriesDefLabels.data = [{
            name: `<span>0% &nbsp;&nbsp;&nbsp;${currencyFormatter.format(endPrice)}</span>`,
            x: startAt, 
            y: endPrice
        },{
            name: `<span>${parameters.retracement1*100}% &nbsp;&nbsp;&nbsp;${currencyFormatter.format(retracement1)}</span>`,
            x: startAt, 
            y: retracement1
        },{
            name: `<span>${parameters.retracement2*100}% &nbsp;&nbsp;&nbsp;${currencyFormatter.format(retracement2)}</span>`,
            x: startAt, 
            y: retracement2
        },{
            name: `<span>${parameters.retracement3*100}% &nbsp;&nbsp;&nbsp;${currencyFormatter.format(retracement3)}</span>`,
            x: startAt, 
            y: retracement3
        }];
        seriesDefLabels.dataLabels = {
            enabled: true,
            align: 'left',
            formatter: function() {
                return this.point.name || "";
            }
        },
        seriesDefLabels.marker = {
            enabled: false,
            radius: 0
        };
        seriesDefLabels.states = {
            hover: {
                lineWidthPlus: 0
            }
        };
        seriesDefLabels.yAxis = indicatorDefinition.draw.yAxis;
        seriesDefLabels.dataGrouping = {
            enabled: false,
        }

        let seriesLabels = chart.addSeries(seriesDefLabels);

        indicatorStack_pushPlot(indicatorStackId, seriesLabels, "line", "labels");
    });
    
};