Apex Charts tooltip formatter: how to convert number to string - charts

Question

I am trying to show y value of a line graph in tooltips (apexcharts). The original data is set in string format in series {'8:50 AM', '11:00 AM', '9:02 AM'...}, but they appear as '8', '11', '9'... in tooltips, rounded up in number format. I do not understand why the string data is converted and rounded by itself. I used 'toString' to reveal the full text ('8:50 AM', '11:00 AM', '9:02 AM'...) in the tooltip formatter, but it did not work. Any suggestion?
var spark1 = {
chart: {
id: 'sparkline1',
type: 'line',
height: 200,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'wake-up time',
data: [{x: '05/06/2014', y:'8:50 AM'}, {x: '05/07/2014', y:'11:00 AM'}, {x: '05/08/2014', y:'9:02 AM'}, {x: '05/09/2014', y:'10:47 AM'}]
}],
tooltip: {
x: {
show: false
},
y: {
formatter: function(value){
return value.toString();
}
}
}
}
}

Answer 1

the chart expects a number to be provided for y.
if a string is provided, it will try to parse it to a number using parseFloat, or something similar.
this is why the numbers are rounded.
parseFloat('8:50 AM') = 8
so if you have something like '1:00 PM', you will not get the desired line.
instead, convert the values to a true date, then extract the time value.
we can do this be creating a new date with both the date and time.
then create another date with just the date portion and subtract it from the previous.
we'll save the chart data in a variable.
var chartData = [{x: '05/06/2014', y: '8:50 AM'}, {x: '05/07/2014', y: '11:00 AM'}, {x: '05/08/2014', y: '9:02 AM'}, {x: '05/09/2014', y: '10:47 AM'}];
then map it for the chart.
data: chartData.map(function (row) {
// create full date time
var rowDate = new Date(row.x + ' ' + row.y);
// subtract date only from full date time
var rowTime = rowDate.getTime() - (new Date(row.x)).getTime();
// return new data point
return {x: row.x, y: rowTime};
})
as for the tooltip, we can use the series argument to pull the index from the original data...
formatter: function(value, series) {
// use series argument to pull original string from chart data
return chartData[series.dataPointIndex].y;
}
see following working snippet...
$(document).ready(function() {
var chartData = [{x: '05/06/2014', y: '8:50 AM'}, {x: '05/07/2014', y: '11:00 AM'}, {x: '05/08/2014', y: '9:02 AM'}, {x: '05/09/2014', y: '10:47 AM'}];
var spark1 = {
chart: {
id: 'sparkline1',
type: 'line',
height: 200,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'wake-up time',
data: chartData.map(function (row) {
// create full date time
var rowDate = new Date(row.x + ' ' + row.y);
// subtract date only from full date time
var rowTime = rowDate.getTime() - (new Date(row.x)).getTime();
// return new data point
return {x: row.x, y: rowTime};
})
}],
tooltip: {
x: {
show: false
},
y: {
formatter: function(value, series) {
// use series argument to pull original string from chart data
return chartData[series.dataPointIndex].y;
}
}
}
};
var chart = new ApexCharts(
document.getElementById('sparkline1'),
spark1
);
chart.render();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="sparkline1"></div>

Answer 2

You can also customise the title and the value with the below format
tooltip: {
y: {
formatter: function (val) {
return "Count: " + val
},
title: {
formatter: function (seriesName) {
return seriesName + "<br/>-------------------<br/>"
},
},
},
},