chartjs-chart-financial icon indicating copy to clipboard operation
chartjs-chart-financial copied to clipboard

Inability to add a line chart to a candlestick chart

Open brianpilati opened this issue 4 years ago • 3 comments

I am unable to get a line chart to render with a candlestick chart. I am using [email protected], [email protected] and Angular with ng2-charts 3.0.0.rc.7

Here is my ts file:

this.financialChart = { data: [ { data: [ { x: 1636069910000, h: 30, l: 20, c: 22, o: 24 }, { x: 1636069930000, h: 40, l: 10, c: 32, o: 34 } ], label: '' }, { data: [25, 28], label: '', type: 'line' as ChartType } ], type: 'candlestick' as ChartType, labels: [], options: { responsive: true, maintainAspectRatio: false, scales: { x: { min: 1636069900000, max: 1636069950000, time: { displayFormats: { minute: 'h:mm a' } }, adapters: { date: { locale: enUS } }, ticks: { source: 'auto', beginAtZero: true } } } }, plugins: { datalabels: { anchor: 'end', align: 'end' } }, legend: false };

Here is my html file: <canvas baseChart [datasets]="financialChart.data" [labels]="financialChart.labels" [options]="financialChart.options" [type]="financialChart.type" [plugins]="financialChart.plugins" [legend]="financialChart.legend" >

brianpilati avatar Nov 04 '21 23:11 brianpilati

I should add that when I turn on the "legend" the line legend appears just no plotted data.

brianpilati avatar Nov 05 '21 00:11 brianpilati

You should consider formatting your code and did you look at this ? https://www.chartjs.org/docs/latest/charts/mixed.html

camheras avatar Dec 13 '21 09:12 camheras

To get line charts to work with candlesticks, you need to specify the x and y points like this:

lineChartData = [{x: 25, y: 28}, {x: 26, y: 15}]

phong-phuong avatar Feb 15 '22 04:02 phong-phuong