Adding volume bars

[AndreasGassmann]

I gave the financial chart a first try today and I was surprised how well it already works! I hope this gets released soon so more people can use it :).

One issue I had: I tried to add volume bars by adding a bar chart to the financial chart. There were no errors, but the bar chart was not shown. Is this possible or would this have to be implemented in the financial chart directly? (reference how I wanted it to look: https://bittrex.com/Market/Index?MarketName=BTC-ETH)

[zedgrep]

Hi Andreas, I wanted this direct volume implementation as well. It took some days to figure out, however I added it directly to the chart object function which draws the bars on canvas. It’s a hack really, but it works. It would be great to have the ability in official release. J

…

On Nov 6, 2017, at 1:06 AM, AndreasGassmann ***@***.***> wrote: I gave the financial chart a first try today and I was surprised how well it already works! I hope this gets released soon so more people can use it :). One issue I had: I tried to add volume bars by adding a bar chart to the financial chart. There were no errors, but the bar chart was not shown. Is this possible or would this have to be implemented in the financial chart directly? (reference how I wanted it to look: https://bittrex.com/Market/Index?MarketName=BTC-ETH) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[AndreasGassmann]

Would you mind sharing your code?

[zedgrep]

Certainly. It is a work in progress and can plot trending too, though it should get you started. You'll have to change the volume scale one line "model.maxv = 500;" or finish my work to allow it to auto-adjust.

Here is a patch for Chart.Financial.js itself, sorry but I haven't bothered to mod the src/code and rebuild.

After the patch, update your time series data objects to include a 'v: ' for volume:
{ t : 1509896700000, o : 0.02993167, h : 0.0302101, l : 0.02984965, c : 0.03021005, v : 27.7722898 }

patch-financial-6Nov17.txt

J

[benmccann]

You should be able to add a bar chart to a financial chart already today. However, you will need to create a separate dataset instead of passing the volume in as the v attribute

[benmccann]

See here for docs on how to do this: http://www.chartjs.org/docs/latest/charts/mixed.html

[terrrychan]

I'm having trouble adding a line chart onto the candlestick graph

              type: 'candlestick',
                data: {
                    datasets: [
                        {
                            type: 'candlestick',
                            label: "CHRT - Chart.js Corporation",
                            data: self.data,
                            fractionalDigitsCount: 4,
                            color: {
                                up: '#53E4A5',
                                down: '#EE4545',
                                unchanged: '#CCCCCC'
                            }
                        }, {
                            label: "CHRT - Chart.js Corporation2",
                            data: self.data_line, 
                            type: 'line', 
                            backgroundColor: '#0C416D',
                            borderColor: '#0C416D',
                            borderWidth: 2
                        }
                    ],
                },

Would appreciate any feedback of where I might be going wrong.

[benmccann]

Mixed charts (i.e. multiple datasets of different types) don't work that well with Chart.js currently. I have a PR that fixes some of it chartjs/Chart.js#5999 and will follow up with the rest of the fix after that's merged

[MehGokalp]

With default configuration you're not easily able to add barcharts.
If someone tries to do same thing as owner of the issue had, here is steps you need to do;

Base config:

    const config = {
            // type: 'candlestick', // you must remove this, this option is braking the chart
            data: {
                datasets: []
            },
            options: {
                parsing: false, // must be here, solves another stupid problem
                spanGaps: true, // for better performance
                animation: false, // for better performance
                pointRadius: 0, // for better performance
                plugins: {
                    title: {
                        display: false,
                        text: 'Fiyat Grafiği'
                    },
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'timeseries',
                    },
                    y: {
                        type: 'linear',
                    },
                    volume: {
                        type: 'linear',
                        beginAtZero: true,
                        position: 'right',
                        max: maxVolume * 10, // maxVolume should be the maximum number of volumes
                        grid: {
                            display: false, // for better presentation
                        },
                        ticks: {
                            display: false, // for better presentation
                        },
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
            }
        };

Second step is preparing the datasets;

    let dataSets = [
                {
                    'type': 'candlestick', // this must stay
                    'label': 'Finansal Grafik',
                    'data': data['klines'].map(function (kline) {
                        return {
                            'x': moment(kline['from']),
                            'o': kline['open_price'],
                            'c': kline['close_price'],
                            'h': kline['high_price'],
                            'l': kline['low_price']
                        };
                    }),
                    color: {
                        up: 'rgb(26, 152, 129)', // those colors are better than defaults
                        down: 'rgb(239, 57, 74)', // those colors are better than defaults
                        unchanged: '#999', // those colors are better than defaults
                    },
                    borderColor: {
                        up: 'rgb(26, 152, 129)',
                        down: 'rgb(239, 57, 74)',
                        unchanged: '#999',
                    },
                    order: 10,
                    yAxisID: 'y', // this must stay
                },
                {
                    'type': 'bar',
                    'label': 'Hacim (Sağ)',
                    'data': data['klines'].map(function (kline) {
                        return {
                            'x': moment(kline['from']), // i used moment, feel free to use your own time library
                            'y': kline.quote_asset_volume,
                        }
                    }),
                    backgroundColor: data['klines'].map(function (kline) {
                        return kline.open_price < kline.close_price ? 'rgb(26, 152, 129)' : 'rgb(239, 57, 74)' // for better presentation
                    }),
                    borderColor: '#fff',
                    borderWidth: 1,
                    order: 12,
                    yAxisID: 'volume', // this must stay
                    barPercentage: 0.5, // this must stay
                    barThickness: 6, // this must stay
                    maxBarThickness: 8, // this must stay
                },
            ]

Result;

[GitCatacao]

Hi @MehGokalp,

I like very much your result image of the chart, but I'm trying every way to get the same result as you and I can't.

Could you help me with this?

https://jsfiddle.net/0boq76xs/

Look at the code.

For some reason the graph is broken, but I think it's written not very wrongly.

Thanks 👋

[MehGokalp]

Hi @GitCatacao

These are the versions that i am using

"chart.js": "^3.6.0",
"chartjs-adapter-moment": "^1.0.0",
"chartjs-chart-financial": "^0.1.1",

May be the versions that you're using causing break the chart. Please let me know if i can help you more

[GitCatacao]

@MehGokalp

These are the versions that i am using

"chart.js": "^3.6.0",
"chartjs-adapter-moment": "^1.0.0",
"chartjs-chart-financial": "^0.1.1",

May be the versions that you're using causing break the chart. Please let me know if i can help you more

Yes, with this versions it works.
The graph is no longer broken.
Thanks. Beautiful work 🫡
BYE!