How to show x axis values with date and month format in highcharts

Question

I am trying to show in the x axis values like date and month 03-02 instead of 03-02-2023

in the highcharts. But I do not know how to show it.

also need to show in the tooltip like Date 03-02-2023 | Quantity 20

If anyone know please help to find the solution.

Demo: https://stackblitz.com/edit/highcharts-cloning-barchart-ijk3ye?file=src%2Fapp%2Fapp.component.ts

Answer 1

You can use formatter function for tooltip and change the date string in the way you want.

For example:

tooltip: {
  formatter: function(){
    const splittedDate = this.x.split('-');
    const dateAndMonth = splittedDate[0] + '-' + splittedDate[1];

    return `<p style="font-size:12px;margin:0px;padding-top:1px;padding-bottom:1px;color:${this.series.color};">Date <strong>${dateAndMonth}</strong>| Quatity <strong>${this.y}</strong></p>`
  },
  ...
}

---

Live demo: https://stackblitz.com/edit/highcharts-cloning-barchart-dabanu

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter