Inability to add a line chart to a candlestick chart

[brianpilati]

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]

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

[camheras]

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

[phong-phuong]

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