chartjs / chartjs-chart-financial

Chart.js module for charting financial securities
MIT License
742 stars 199 forks source link

Inability to add a line chart to a candlestick chart #110

Open brianpilati opened 2 years ago

brianpilati commented 2 years ago

I am unable to get a line chart to render with a candlestick chart. I am using Chart.js@3.6.0, chartjs-chart-financial@0.1.0 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 commented 2 years ago

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

camheras commented 2 years ago

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

phong-phuong commented 2 years ago

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}]