Search code examples
chartsapexcharts

Apex Charts - How can I convert values in pie chart from seconds to HH:MM:SS format


I use Apex Charts to make a pie chart that shows the number of seconds I worked on a project. but I want to convert those seconds into a normal format for time, like 1862 should be 00:31:02. I tried to read the documentation but didn't really understand. can someone help?

Example of my chart

My code:

<script>
        
        var options = {
        series: <?php echo json_encode($graphSmallTotal['data']); ?>,
        chart: {
        height: 300,
        type: 'donut',
    },
    dataLabels: {
        enabled: false
    },
    theme: {
        palette: 'palette2'
    },
    legend: {
      position: "bottom",
      horizontalAlign: 'left'
    },
    labels: <?php echo json_encode($graphSmallTotal['names']); ?>,
    colors: <?php echo json_encode($graphSmallTotal['colors']); ?>,
    plotOptions: {
        pie: {
            donut: {
                labels: {
                    name: {
                        show: false
                    },
                    label: {
                        show: false,
                        fontSize: '36px',
                    },
                    total: {
                        show: true
                    }
                }
            }
        }
    }
    };

    var chart = new ApexCharts(document.querySelector("#byProject"), options);
    chart.render();
    </script>

Solution

  • Create custom formatter for tooltip value like this

    tooltip: {
      y: {
        formatter: function(value) {
          return new Date(value * 1000).toISOString().substr(11, 8);
        }
      }
    },
    

    https://apexcharts.com/docs/options/tooltip/#yformatter