Svelte and chartjs, pass data - chart.js

Question

I'm trying to create a chart with chart.js and svelte. I call the data in 3 ways and only one works and it's not the one I'm interested in.
In test 1 I have the data in an external js and it works. (data)
In test 2 I put the same array in the svelte file and it doesn't work. (data2)
In test 3 I take the data from an api and configure the array to have the same format as the previous ones. It doesn't work (data_chart)
I need to make the 3rd option work. Any idea why it doesn't like it?
<script>
import { page } from '$app/stores';
import { onMount } from 'svelte';
import { data } from './data.js';
import { Line } from 'svelte-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale } from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);
export let param = String($page.params.slug);
let ruta_api = `${import.meta.env.VITE_WP_API}posts?slug=${param}`;
let ruta_api_chart = '';
let value = [];
let value_chart = [];
let data_chart = new Array;
let id_chart = [];
const data2 = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
borderColor: 'rgb(205, 130, 158)',
data: [65, 59, 80, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
borderColor: 'rgb(35, 26, 136)',
data: [28, 48, 40, 19, 86, 27, 90],
},
],
};
onMount(async () => {
await loadData();
});
async function loadData() {
const response = await fetch(ruta_api);
const newData = await response.json();
value = [...value, ...newData];
ifChart();
}
async function ifChart(){
//comprobamos si viene una grafica en el contenido
let posicion_chart = value[0].content.rendered.indexOf('m-chart-container-');
if(posicion_chart >= 0){
const regex = /(?<=m-chart-container-)(.*?)(?=-)/mg;
id_chart = value[0].content.rendered.match(regex);
//recorremos los ids
id_chart.forEach(function(id) {
getChart(id);
})
}
};
export async function getChart(id){
ruta_api_chart = `${import.meta.env.VITE_WP_API}m-chart/` + id;
const response_chart = await fetch(ruta_api_chart);
const newData_chart = await response_chart.json();
value_chart = newData_chart['m-chart'];
data_chart = {'labels' : value_chart['data'][0][0], 'datasets': {'label' : value_chart['x_title'], 'data' : value_chart['data'][0][1]}};
};
</script>
<Line {data} options={{ responsive: true }} />
<Line {data2} options={{ responsive: true }} />
<Line {data_chart} options={{ responsive: true }} />

Answer 1

This might be because in
<Line {data} options={{ responsive: true }} />
{data} is the shorthand for data={data}
In the other cases the variable name is different, so try changing to
<Line data={data2} options={{ responsive: true }} />
<Line data={data_chart} options={{ responsive: true }} />