Question:
I am working on a React project where I am using ECharts to display a line graph with time-series data. My data consists of two lines that represent different calculations related to income (“ingreso”) in USD and ARS (Argentinian Pesos).
Here’s a snippet of my code that’s relevant to the issue:
// Function for Line 1
const cuantoDolarValiaElSueldo = (ingresos: ExtendedIngresosRow[]) => {
return ingresos.map((entry) => {
let amountInUSD;
if (entry.currency === "ARS") {
amountInUSD = entry.cantidad / (entry.adolarblueenesemomento ?? 1);
console.log(
`Converted ${entry.cantidad} ARS to ${amountInUSD} USD using rate ${entry.adolarblueenesemomento}`
);
} else {
amountInUSD = entry.cantidad; // Already in USD
console.log(`Amount already in USD: ${amountInUSD}`);
}
const formattedAmount = amountInUSD.toLocaleString("de-DE", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(`Formatted amount: ${formattedAmount}`);
return [entry.timestamp_with_time_zone, formattedAmount];
});
};
// Function for Line 2
const cuantoValeElDolarEnSueldoAhora = (
ingresos: ExtendedIngresosRow[],
currentRate: number
) => {
return ingresos.map((entry) => {
let amountInUSD;
if (entry.currency === "ARS") {
amountInUSD = entry.cantidad * currentRate;
console.log(
`Converted ${entry.cantidad} ARS to ${amountInUSD} USD using current rate ${currentRate}`
);
} else {
amountInUSD = entry.cantidad; // Already in USD
console.log(`Amount already in USD: ${amountInUSD}`);
}
const formattedAmount = amountInUSD.toLocaleString("de-DE", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(`Formatted amount: ${formattedAmount}`);
return [entry.timestamp_with_time_zone, formattedAmount];
});
};
const PuntosCuantoDolarValiaElSueldo = cuantoDolarValiaElSueldo(
fetchedIngresosDelMes
);
const PuntosCuantoValeElDolarEnSueldoAhora = cuantoValeElDolarEnSueldoAhora(
fetchedIngresosDelMes,
currentBlueDollarRate
);
let myChart = echarts.getInstanceByDom(chartRef.current);
if (!myChart) {
myChart = echarts.init(chartRef.current, "dark");
}
const seriesList: echarts.SeriesOption[] = [
{
type: "line",
name: "Cuánto valía el sueldo en dólares",
data: PuntosCuantoDolarValiaElSueldo,
encode: {
x: 0,
y: 1,
},
},
{
type: "line",
name: "Cuánto vale el sueldo en dólares ahora",
data: PuntosCuantoValeElDolarEnSueldoAhora,
encode: {
x: 0,
y: 1,
},
},
];
const option: EChartsOption = {
animationDuration: 10000,
title: {
text: "Ingresos en pesos que se devaluaron",
},
tooltip: {
order: "valueDesc",
trigger: "axis",
},
xAxis: {
type: "time",
nameLocation: "middle",
},
yAxis: {
name: "Lo que acumulaste",
},
grid: {
right: 140,
},
series: seriesList,
};
myChart.setOption(option);
}, [fetchedIngresosDelMes, isLoading]);
Problem:
I am facing three issues:
-
Formatting: I am trying to change the format of the y-axis values to use “commas” for decimals and “dots” for digit grouping. I’ve used toLocaleString with the “de-DE” locale, but the graph is not rendering the y-axis correctly.
-
Graph Rendering: The x-axis, title, and description of the graph are visible, but the y-axis and the data points (dots) are not rendering. I suspect it might be related to the data formatting.
-
Y-Axis and Dots: Despite the x-axis and other elements rendering correctly, the y-axis and the dots representing the data points are not being displayed.
What I’ve Tried:
I’ve added console logs to debug the data and formatting, but I am still unable to identify the issue.
Question:
How can I correctly format the y-axis data to use “commas” for decimals and “dots” for digit grouping, and ensure that the graph, y-axis, and data points (dots) render correctly?
