Search code examples
reactjstimestampapexcharts

Unable to convert timestamp to hours minutes and secondes in React apex-chart

I am using react apex chart to create a chart that will display the average response time for each agent.

I have managed to get the result in a timestamp format but i am unable to convert that into hours, minutes and seconds to display that in yaxis, i have checked the documentation docs link but they are giving examples for date time only. here is the result that i am getting with the component bellow

enter image description here

import React, { useState } from 'react';
import Chart from 'react-apexcharts';

const AvgResponseTimeChart = (props) => {
    const { prod_data } = props;
    const [ data, setData ] = useState([
        {
            x: 'Agent one',
            y: 1589670005
        },
        {
            x: 'Agent one',
            y: 1589670307
        }
    ]);
    const [ series, setSeries ] = useState([ { data } ]);
    const [ options, setOptions ] = useState({
        chart: {
            type: 'bar',
            height: 350
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '25%',
                endingShape: 'rounded'
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            width: 2,
            colors: [ 'transparent' ]
        },
        xaxis: {
            type: 'category'
        },
        yaxis: {
            labels: {
                datetimeFormatter: {
                    formatter: function(value, timestamp) {
                        return new Date(timestamp).toLocaleTimeString();
                    }
                }
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function(value, timestamp) {
                    return new Date(timestamp);
                }
            }
        }
    });
    return (
        <div id="chart">
            <Chart options={options} series={series} type="bar" height={350} />
        </div>
    );
};

export default AvgResponseTimeChart;

I have searched for similar issues without success if, someone can help me with that i will be really grateful

Solution

  • Try to add lables to yaxis in chartOptions this way:

    labels: {
    show: true,
    formatter: (val) => { return new Date(val); }
}

    And remove the tooltip as well.