How to show correctly ticks to time data in a Pie chart label using highcharts?

Question

I'll try to be brief, Im trying to render a pie chart and setup labels to show total time, I'm getting ticks and I want to show it in a pie chart.

As far as I know pie charts doesn't se axis, and all alternatives I find are configured in X or Y axis. Something like this:

xAxis: {
    type: 'datetime', //y-axis will be in milliseconds
},

And in the tooltip:

formatter: function () {
    return '<b>' + this.series.name + '</b><br/>' +
    Highcharts.dateFormat('%H:%M:%S', new Date(this.y));
},

This is my text code

        Highcharts.chart('container', {
                        chart: {
                            type: 'pie',
                            options3d: {
                                enabled: true,
                                alpha: 45,
                                beta: 0
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        tooltip: {
                            formatter: function () {
                                return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%H:%M:%S', new Date(this.y));
                            },
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            data: [
                                    [ 'T1',30600000000  ],
                            ]
                        }]
                    });

I've tried some online ticks converters an all of them convert '30600000000' to 00:51:00 (HH:mm:ss) ut in my label is displayed 04:00:00.

here is a fiddle https://jsfiddle.net/lvevano/gp80ckfr/2/ What am I doing wrong ?

When converting '30600000000' with this [1] converter, I get 09/04/2939 @ 4:00pm (UTC). So probably your converter was wrong. [1] unixtimestamp.com/index.php — Benedikt
That's true, I'm using tickstodatetime.azurewebsites.net , maybe it's a problem with UTC configuration, but I tried to disable it, and the result is the same. — Joel Luevano
Hi @Joel Luevano, The dates in the tooltip are correct. The same values are in a standard line chart: jsfiddle.net/BlackLabel/opt7xzbv — ppotaczek

Ashu Ashu · Accepted Answer · 2019-08-30T10:52:43

You are having a difference because the constructor you are using for Date accepts EPOCH date and you are passing ticks to it. You will need to convert this to EPOCH so that javascript can understand it.

var yourDate = new Date(30600000000); // Your date
console.log(yourDate);
var convertedToEpoch = (yourDate.getTime() - 621355968000000000) / 10000;
console.log(new Date(convertedToEpoch));

Updated your fiddle with a new method to convert ticks to epoch.

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45,
      beta: 0
    }
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M:%S', new Date(convertTicksToEpoc(this.y)));
    },
    shared: true,
    useHTML: true
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 35,
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },
  series: [{
    type: 'pie',
    data: [
      ['T1', 30600000000],
      ['T2', 20400000000],
    ]
  }]
});

function convertTicksToEpoc(ticks) {
  return (ticks - 621355968000000000) / 10000;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

You can get some idea about these two dates on this link https://devkimchi.com/2018/11/04/converting-tick-or-epoch-to-timestamp-in-logic-app/

How to show correctly ticks to time data in a Pie chart label using highcharts?

1 Answers