Comments (3)
I am interested also
from chartjs-chart-financial.
@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 :)
from chartjs-chart-financial.
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.
from chartjs-chart-financial.
Related Issues (20)
- Chart.js 3 bugs HOT 1
- demo links in the readme seems to be broken HOT 4
- Inability to add a line chart to a candlestick chart HOT 3
- Running on NodeJS HOT 3
- Type '"metaExtensions"' cannot be used to index type 'ChartTypeRegistry[key]' HOT 1
- Candle border options HOT 3
- Problem with libary and nodejs, browserless usage HOT 4
- [Bug] Data does not get displayed properly after hiding it and showing it again. HOT 3
- Strip random data and replace with my own HOT 1
- Using this module with react ? HOT 2
- [Error] candlestick is not a registered controller chartjs. HOT 1
- Type Error from chart.js using candlestick charts HOT 10
- How to click to get data from candle stick
- Conflict with react^18 HOT 1
- BUG on calculating the min sample size
- X values and data is not displayed
- How to change candle stick color? HOT 3
- How to add some padding on the right hand size
- How can I center the chart?
- Error when upgrading from Chart.js 3.0 to 4.4 HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartjs-chart-financial.