[REQUEST] Renko Chart about chartjs-chart-financial

[Atem18]

I am interested also

[Atem18]

@rrfaria Actually, I found an easy way to do it.

Just create a bar chart like that:

this.chart = new Chart(this.$refs.backtestChart, {
    type: 'bar',
    data: {
        labels: renkoPoints,
        datasets: [{
            type: 'bar',
            label: 'Renko Prices',
            borderWidth: 1,
            data: renkoPrices,
            backgroundColor: renkoColors
        }]
    },
    options: {
        scales: {
            xAxes: [{
                categoryPercentage: 1.0,
                barPercentage: 1.0
            }]
        }
    }
})

For the variables, I generate them like that:

response.data.backtest_result = {"direction" : [0, -1, -1, -1, 1, 1, -1, -1, -1, -1, 1, 1, 1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, 1, -1, -1, -1, -1, -1, -1, -1, -1, -1], "price" : [9528.7, 9518.8, 9508.9, 9499, 9518.9, 9528.8, 9508.9, 9499, 9489.1, 9479.2, 9499.1, 9509, 9518.9, 9528.8, 9538.7, 9518.8, 9538.7, 9548.6, 9558.5, 9568.4, 9578.3, 9588.2, 9598.1, 9608, 9617.9, 9627.8, 9607.9, 9598, 9617.9, 9627.8, 9637.7, 9647.6, 9657.5, 9667.4, 9677.3, 9687.2, 9667.3, 9687.2, 9697.1, 9707, 9716.9, 9697, 9687.1, 9707, 9687.1, 9677.2, 9697.1, 9707, 9716.9, 9726.8, 9736.7, 9746.6, 9756.5, 9736.6, 9726.7, 9716.8, 9706.9, 9697, 9687.1, 9707, 9716.9, 9697, 9716.9, 9726.8, 9736.7, 9746.6, 9756.5, 9766.4, 9776.3, 9786.2, 9796.1, 9806, 9815.9, 9796, 9815.9, 9825.8, 9835.7, 9845.6, 9855.5, 9865.4, 9875.3, 9885.2, 9895.1, 9905, 9914.9, 9924.8, 9934.7, 9914.8, 9904.9, 9895, 9914.9, 9895, 9885.1, 9875.2, 9865.3, 9855.4, 9845.5, 9835.6, 9825.7, 9815.8]}
var renkoColors = [];
var renkoPrices = [];
for (let i = 1; i < response.data.backtest_result.direction.length; i++) {
    var direction = response.data.backtest_result.direction[i];
    if (direction === 0 || direction === -1) {
        renkoColors.push('rgba(255, 82, 82)')
    } else if (direction === 1) {
        renkoColors.push('rgba(76, 175, 80)')
    }
}
for (let j = 1; j < response.data.backtest_result.price.length; j++) {
    var previousPrice = 0
    var price = response.data.backtest_result.price[j];
    if (j === 1) {
        previousPrice = response.data.backtest_result.price[0]
    } else {
        previousPrice = response.data.backtest_result.price[j - 1]
    }
    renkoPrices.push([previousPrice, price])
}
var renkoPoints = []
for (let k = 1; k < renkoPrices.length; ++k) {
    renkoPoints.push(k.toString());
}

And that response.data.backtest_result JSON comes from an API request with Axios :)

[AzadCoder]

I'm interested too. In my new project, I have a lot of searches about the Renko chart in angular but I couldn't found any good result.