How to set xAxis in TIME type and formatted like {hh:mm} in Echarts?

Question

I want to set xAxis in TIME type and formatted like {hh:mm} , such as 17:45.

In this demo, configuration works:

xAxis: {
    type: "time",
},

value: [
    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
    Math.round(value)
]

But this fails, here is my demo in Echarts gallery :

xAxis: {
    type: "time",
},

value: [
    [now.getHours(), now.getMinutes()].join(":"),
    Math.round(value)
]

I tried type: "value", still not working.

Answer 1

As mention above you need to use xAxis.axisLabel.formatter.

Here is your example.

// Horizontal axis
xAxis: [{
    type: 'time', 
    axisLabel: {
      formatter: (function(value){
        let label;
        if (value.getMinutes() < 10){ 
          label = value.getHours() + ":0" +value.getMinutes();
        }
        else {
          label = value.getHours() + ":" +value.getMinutes();
        }
        return label;
      })
    }
}],

Answer 2

Use xAxis.axisLabel.formatter. This can be a formatter string or a function.

Use this as reference: https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter

Answer 3

I made your demo working. I've changed the value like this:

value: [
    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + 'T' +
    [now.getHours(), now.getMinutes()].join(':'),
    Math.round(value)
]

Please see this screenshot:

Answer 4

For anyone looking for the answer, the link provided in the accepted answer is correct but has 404'd.

Here's the current working one: https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter