CODEWITHSUNDEEP
highchartspie-chartdataformat
Tommy
Tommy

Reputation: 850

Using hours and minutes as data in highcharts donut chart

I got a donut chart and want to display hours and minutes. Using highcharts pie chart with constant visible drilldown data this leads me to a big problem, please see the picture first:

hours and minutes problem

The inner blue slice has the value 10.40, which stands for 10:40 as a time. The two outer slices have the values 5.50 and 4.50, which, summed up as hours and minutes, results in 10.40, but highcharts doesn't know it's a time format, so it sums that up as 10.00 which perfectly shows my problem.

I tried setting the yAxis type to datetime

type: 'datetime',

which does not change anything so far. I found other entries like Pass time values to Highcharts Column chart, which sadly left me clueless.

Did I miss something? Glad for any help.

Upvotes: 1

Views: 1013

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

An minimal example solution, using millisecond values to only display hours and minutes (JSFiddle):

var m = 1000 * 60;
var h = m * 60;

$('#container').highcharts({
    chart: {
        type: 'pie'
    },
    tooltip: {
        formatter: function() {
            return  '<b>' + this.series.name +'</b><br/>' +
                    Highcharts.dateFormat('%H:%M', new Date(this.y));
        }
    },
    series: [{
        name: 'Inner',
        data: [
            { name: 'A', y: (10 * h) + (40 * m), color: 'blue' }, 
            { name: 'B', y: (3 * h), color: 'red' }, 
        ],
        size: '60%'
    }, {
        name: 'Outer',
        data: [
            { name: 'A1', y: (5 * h) + (50 * m), color: 'blue' }, 
            { name: 'A2', y: (4 * h) + (50 * m), color: 'blue' }, 
            { name: 'B1', y: (3 * h), color: 'red' }, 
        ],
        size: '100%',
        innerSize: '60%'
    }]
});

Here we just operate with time going from 0 and out. The tooltip is used to format the values in a readable format.

See this more elaborate JSFiddle demonstration using some of the pie-donut demo code to color the slices like your example picture.

Upvotes: 1

Related Questions