Search code examples
datetimehighchartshighcharts-ng

Highcharts datetime format y-axis interval

I am setting up a chart with datetime format on the yaxis. It is working fine, however, it is rounding my times. I have set my min to be "00:00" (utc: 1453698000000) and the max to be "08:24" (utc: 1453698504000). My format is "%M:%S" (minutes:seconds)...i've set my tickInterval to 124000(2 minutes and 4 seconds). Two things: - instead of going from 00:00 to 02:04 to 04:08 ect...it rounds to 02:00, 04:00 ect. - it only goes up to "08:00"....any insight would be great! Thanks

            $scope.chartConfig = {
            options: {
                global: {
                    useUTC: false
                },
                chart: {
                    type:'column',
                    alignTicks: false,
                    zoomType: 'xy'
                },
                xAxis: {
                    categories: [1,2,3,4]
                },
                yAxis: {

                    type: 'datetime',
                    dateTimeLabelFormats: {
                        millisecond: '%M:%S',
                        second: '%M:%S',
                        minute: '%M:%S',
                        hour: '%M:%S',
                        day: '%M:%S',
                        week: '%M:%S',
                        month: '%M:%S',
                        year: '%M:%S'
                    },

                    min: 1453698000000,
                    max: 1453698126000,
                    startOnTick: false,
                    endOnTick: false,
                    showLastLabel: true,
                    tickInterval: 124000,
                    labels: {
                        formatter: function () {
                            return moment(this.value).format("mm:ss");
                        }
                    }
                },
                tooltip: {
                    formatter: function () {
                        return moment(this.y).format("mm:ss");
                    }
                },
                plotOptions: {
                    column: {
                        grouping: false,
                        shadow: false,
                        borderWidth: 0
                    }
                },
                credits: {
                    enabled: false
                }
            },
            series: [{
                name: 'COMPLETEDTIME',
                 data: [moment("7:40", "mm:ss").valueOf(), moment("7:46", "mm:ss").valueOf(), moment("7:50", "mm:ss").valueOf(), moment("8:03", "mm:ss").valueOf()],
            }]
        }

enter image description here

Solution

  • I think I solved the issue by using 'tickPositioner'...I'm not sure why this can't be done by using min and max along with a tickInterval. If anyone knows, feel free to chime in. Thanks!