Apex Charts tooltip formatter: how to convert number to string

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();
       }
    }
  }
 }
}

Damian

I want to show the full time of y values in string format ('8:50 AM', '11:00 AM', '9:02 AM', '10:47 AM'), but they appear as rounded numbers in tooltips ('8', '11' '9', '10'). I added the rest of the chart code above. Thanks for looking! – Damian

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>

Hemichordate

Thank you so much for the explanation and the code! It makes sense and works! – Damian

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/>"
          },
        },
      },
    },

Viradis