I'm using angular 11 and apexcharts 3.19.0. When I hover ANY PART of the chart, "[object Object]" appears in the middle at the top. I have tried many configurations with xaxis, yaxis, tooltip and others, but nothing works. Could someone help me?
Case image: stack overflow doesn't allow me to embed images, but click here to view it.
My chart options:
// Build chart options
this.chartOptions = {
series: [
{
name: this.chartTranslations['privateTransport.usageReport.chart.STOPPED'],
data: usageReport.history.map((history: HistoryReport) => history.stoppedTime || 0),
},
{
name: this.chartTranslations['privateTransport.usageReport.chart.IDLE'],
data: usageReport.history.map((history: HistoryReport) => history.idleTime || 0),
},
{
name: this.chartTranslations['privateTransport.usageReport.chart.DRIVING'],
data: usageReport.history.map((history: HistoryReport) => history.drivingTime || 0),
},
],
colors: ['#90989b', '#fc9337', '#54bdea'],
chart: {
type: "bar",
width: '100%',
height: 500,
stacked: true,
stackType: "100%",
zoom: {
enabled: false,
},
animations: {
enabled: false,
}
},
plotOptions: {
bar: {
columnWidth: width,
dataLabels: {
position: 'top',
}
}
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0
}
}
}
],
xaxis: {
type: 'datetime',
categories: usageReport.history.map((history: HistoryReport) =>
new Date(history.serviceDate).getTime()
),
// This is maybe slower than the one above, but we need test which one works better in real cases
// categories: usageReport.history.map((history: HistoryReport) => moment(history.serviceDate).format('DD/MM/YYYY HH:mm').toString()),
},
fill: {
opacity: 1
},
legend: {
position: "top",
onItemHover: {
highlightDataSeries: true
},
offsetX: 0,
offsetY: 0,
},
tooltip: {
y: {
formatter: (value: number) => {
if (typeof value !== "number") return "0h 0m 0s"
const hours = Math.floor(value / 3600);
const minutes = Math.floor((value % 3600) / 60);
const seconds = value % 60;
return `${hours}h ${minutes}m ${seconds}s`;
},
},
// If xaxis is not datetime, delete this
x: {
format: 'dd/MM/yyyy HH:mm'
}
},
};
I'm using angular 11 and apexcharts 3.19.0. When I hover ANY PART of the chart, "[object Object]" appears in the middle at the top. I have tried many configurations with xaxis, yaxis, tooltip and others, but nothing works. Could someone help me?
Case image: stack overflow doesn't allow me to embed images, but click here to view it.
My chart options:
// Build chart options
this.chartOptions = {
series: [
{
name: this.chartTranslations['privateTransport.usageReport.chart.STOPPED'],
data: usageReport.history.map((history: HistoryReport) => history.stoppedTime || 0),
},
{
name: this.chartTranslations['privateTransport.usageReport.chart.IDLE'],
data: usageReport.history.map((history: HistoryReport) => history.idleTime || 0),
},
{
name: this.chartTranslations['privateTransport.usageReport.chart.DRIVING'],
data: usageReport.history.map((history: HistoryReport) => history.drivingTime || 0),
},
],
colors: ['#90989b', '#fc9337', '#54bdea'],
chart: {
type: "bar",
width: '100%',
height: 500,
stacked: true,
stackType: "100%",
zoom: {
enabled: false,
},
animations: {
enabled: false,
}
},
plotOptions: {
bar: {
columnWidth: width,
dataLabels: {
position: 'top',
}
}
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0
}
}
}
],
xaxis: {
type: 'datetime',
categories: usageReport.history.map((history: HistoryReport) =>
new Date(history.serviceDate).getTime()
),
// This is maybe slower than the one above, but we need test which one works better in real cases
// categories: usageReport.history.map((history: HistoryReport) => moment(history.serviceDate).format('DD/MM/YYYY HH:mm').toString()),
},
fill: {
opacity: 1
},
legend: {
position: "top",
onItemHover: {
highlightDataSeries: true
},
offsetX: 0,
offsetY: 0,
},
tooltip: {
y: {
formatter: (value: number) => {
if (typeof value !== "number") return "0h 0m 0s"
const hours = Math.floor(value / 3600);
const minutes = Math.floor((value % 3600) / 60);
const seconds = value % 60;
return `${hours}h ${minutes}m ${seconds}s`;
},
},
// If xaxis is not datetime, delete this
x: {
format: 'dd/MM/yyyy HH:mm'
}
},
};
1 Answer
Reset to default 0The issue you are facing, where [object Object] appears when hovering over the chart, is likely caused by how ApexCharts processes the xaxis.categories when using a datetime type. Since your xaxis.categories array contains timestamps, ApexCharts may be expecting a proper formatting function.
Solution: You need to explicitly set the tooltip.x.formatter function to correctly format the date values instead of relying on the default behavior.
Modify your tooltip configuration as follows:
tooltip: {
x: {
formatter: (value: number) => {
return new Date(value).toLocaleString(); // Formats timestamp correctly
}
},
y: {
formatter: (value: number) => {
if (typeof value !== "number") return "0h 0m 0s";
const hours = Math.floor(value / 3600);
const minutes = Math.floor((value % 3600) / 60);
const seconds = value % 60;
return `${hours}h ${minutes}m ${seconds}s`;
}
}
}
Explanation: The issue likely arises because xaxis.categories contains timestamps, but ApexCharts does not automatically format them for tooltips unless specified.
By adding a formatter function to tooltip.x, we ensure the timestamp is converted into a human-readable format.
new Date(value).toLocaleString() ensures proper date-time formatting.
This should resolve the [object Object] issue and display the correct tooltip values. Let me know if you need further assistance!
usageReport.history. – Yong Shun Commented Mar 30 at 3:46